Sự kiện click trong css

Example

Execute a JavaScript when a button is clicked:

Click me

Try it Yourself »

Definition and Usage

The title event occurs when the user clicks on an element.

In JavaScript, using the addEventListener[] method:

object.addEventListener["click", myScript];

Try it Yourself »

Technical Details

Bubbles:YesCancelable:YesEvent type:MouseEventSupported
HTML tags:All exept:, ,
, , ,,,,Try it Yourself »

Another example on how to change the color of an element:

Click me to change my color.

Try it Yourself »

Click to copy text from one input field to another:

Copy Text

Try it Yourself »

How to assign an " title" event to the window object:

window. title = myFunction;

  function myFunction[] {
document.getElementsByTagName["BODY"][0].style.backgroundColor = "yellow";
}

Try it Yourself »

Use title to create a dropdown:

document.getElementById["myBtn"]. title = function[] {myFunction[]};

function myFunction[] {
  document.getElementById["myDropdown"].classList.toggle["show"];
}

Try it Yourself »

Related Pages

JavaScript Tutorial: JavaScript Events

HTML DOM reference: ondblclick event

HTML DOM reference: onmousedown event

HTML DOM reference: onmouseup event

Browser Support

title is a DOM Level 2 [2001] feature.

It is fully supported in all browsers:

ChromeIEEdgeFirefoxSafariOperaYes9-11YesYesYesYes

Sự kiện Click trong jquery là một công cụ giúp chúng ta kích hoạt những hành động khi nhấp chuột vào một đối tượng html nào đó trên website.

Cú pháp

$[selector].click[function[]{
    //Code xử lý khi click thành công
}];

Trong đó: selector chính là bộ chọn đến phần tử cần click vào nó. Nó có thể là một phần tử html, class, id…

Lưu ý: Trước khi sử dụng sự kiện click trong jquery bạn cần import thư viện ở trong thẻ

Ví dụ 1: Hiển thị thông báo khi click vào thẻ a

    
    Sự kiện Click Jquery
    



$[document].ready[function[]{
    $['h2'].click[function[]{
        alert["Click h2 by Jquery"];
    }];
}];


Click Jquery

Trong chương trình trên khi click vào h2 thì sẽ hiển thị lên một hộp thoại

Click h2 by Jquery

Tự động kích hoạt sự kiện click vào một đối tượng

Đây là một giải pháp giúp chúng ta muốn tự động kích hoạt sự kiện click vào một đối tượng thông qua một sự kiện khác.

Ví dụ 2: Kích hoạt click vào

0

$[ "#other" ].click[function[] {
  $[ "#target" ].click[];
}];

Qua ví dụ trên bạn thấy khi click vào

1 sẽ tự động kích hoạt sự kiện click vào thẻ

0

Tổng kết

Qua bài viết này bạn đã được tôi giới thiệu về sự kiện click trong Jquery, việc của bạn bây giờ cần cài đặt lại những ví dụ trên để nắm chắc bài học.

*Chắc hắn mọi người người đã từng mong muốn làm thế nào để xử lý sự kiện hover của phần tử con nhưng nó nhưng thay vì thay đổi thuộc tính của bản thân nó ta lại muốn thay đổi phần tử cha hay các phàn tử ngang hàng của nó.

giả sửa ta có đoạn mà html:*

  
  
Child one
  
Child two
  
Child three
  
Child four
  
Child five
  
Child six

Yêu cầu 1

Bài toán sẽ dễ dàng nếu như khi hover vào bất kì phần tử li nào thì background của ul thay đổi, nhưng bây giờ ta chỉ muốn duy nhất khi hover vào phần tử thứ 3 thì background của ul mới thay đổi.

• Sử dụng pointer-events Thuộc tính pointer-events của CSS hạn chế con trỏ chuột:
  • click chuột vào bất kỳ đối tượng nào
  • không hiển thị icon mặc định [tùy thuộc vào trình duyệt]
  • sự kiện liên quan đến CSS hover
  • không cho phép hàm JavaScript click [onlick] chạy

Tài liệu về pointer-events

ở ul ta thêm thuộc tính:

ul {
  pointer-events: none;
}

ở phần tử thứ 3 ta thêm thuộc tính:

.three {
  pointer-events: auto;
}

ở đây ta chỉ cần thêm huộc tính hover ở phần tử ul nữa là được:

ul:hover{
  background: red;
}

Link ví dụ Codepend

Yêu cầu 2: Giả sử ta có đoạn mà html

   
Child

Yêu cầu thay vì như bài toán phía trên bây giờ apply sự kiện hover cho phần tử child nhưng không apply cho parrent

• Theo cách thông thường ta sẽ thêm một thẻ html ngang hang với phần thử child:

    
Child
    
Child

và style cho nó:

.parent { width: 400px; height:400px; position: relative; z-index: 998; }
.parent:hover { background-color: green; }

'child {width: 200px; height:200px; position: relative; z-index: 1000; }

.child:hover { background-color: blue; }

.overwrite {
  position: absolute;
  top: 0; 
  left: 0; 
  z-index: 999;
  width: inherit;
  display: none;
  ...
}

.child:hover ~ .overwrite { display: block; }

Link ví dụ Codepend

nhưng nếu ta sử dụng pointer-events:

Ta sẽ giữ nguyện được đoạn mà html ban đầu:

    
Child

.parent {
  pointer-events: none;
...
}

.child {
  pointer-events: auto;
 ...
}

.child:hover { background-color: blue; }

Ta thấy việc sử dụng pointer-events dễ dàng và tối ưu hơn, điểm trừ duy nhất của thuộc tính này là một số trình duyệt thấp không hỗ trợ.

Tài liệu tham khảo:

//developer.mozilla.org/en-US/docs/Web/CSS/pointer-events

//medium.com/@erinannette/css-pointer-events-simple-clever-hovers-with-just-a-few-lines-of-code-d44a14a4e06f