Hướng dẫn pointer-events javascript - con trỏ-sự kiện javascript

Đã đăng vào thg 11 12, 2018 2:24 SA 2 phút đọc 2 phút đọ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

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

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

    
Child

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

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

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

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

và style cho nó:

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

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

.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; }