Đã đă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ó:
//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
.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; }
Là một website được viết trên công nghệ web Flutter vì vậy hỗ trợ rất tốt cho người học, kể cả những người học khó tính nhất.
Hiện tại website đang tiếp tục được cập nhập nội dung cho phong phú và đầy đủ hơn. Mong các bạn nghé thăm và ủng hộ website mới của chúng tôi.
buttons
Trả về một con số mô tả những nút chuột được nhấn khi sự kiện chuột được kích hoạt. là một interface đại diện cho các sự kiện xẩy ra khi người dùng tương tác với các thiết bị trỏ [pointing device], chẳng hạn như chuột. Các sự kiện thông thường như click, dbclick, mousedown, mouseup,...
which là một interface con của UIEvent.
[Không phải là thuộc tính tiêu chuẩn, không nên sử dụng]. MouseEvent:
2: Nút thứ 2, thường là nút chuột phải. | 3: Nút thứ 4, cụ thể là nút Browser Back. |
4: Nút thứ 5, cụ thể là nút Browser Forward. | 0 : Không có nút nào hoặc không được khởi tạo.context-menu. |
1 : Nút chính, thường là nút chuột trái. | 2 : Nút thứ 2, thường là nút chuột phải. |
4 : Nút phụ trợ [Auxilary button], thường là nút bánh xe hoặc nút giữa. | 8 : Nút thứ 4, thường là nút "Browser Back". |
16 : Nút thứ 5, thường là nút "Browser Forward". | event.buttons có thể trả về một giá trị khác các giá trị ở trên. Chẳng hạn event.buttons trả về 3 nếu bạn nhấn đồng thời cả 2 nút chuột trái và nút chuột phải. |
Other properties | relatedTarget |
Trả về phần tử liên quan đến phần tử đã kích hoạt sự kiện chuột. | 1- MouseEvent |
MouseEvent là một interface đại diện cho các sự kiện xẩy ra khi người dùng tương tác với các thiết bị trỏ [pointing device], chẳng hạn như chuột. Các sự kiện thông thường như click, dbclick, mousedown, mouseup,... | MouseEvent là một interface con của UIEvent. |
Các kiểu sự kiện của MouseEvent: | Sự kiện |
Mô tả | click |
Sự kiện xẩy ra khi người dùng nhấp [click] trên một phần tử [element].
contextmenu click [Nhấp chuột], nó được hình thành từ hành động nhấn xuống [press down] và nhả [release]. Sự kiện click được minh họa giống hình dưới đây:
Sự kiện xẩy ra khi người dùng nhấn phải chuột [right-clicks] vào phần tử để mở ra một context-menu.
dblclick click [nhấp chuột] 2 lần nhanh nó sẽ tạo ra sự kiện dbclick.
Sự kiện xẩy ra khi người dùng nhấn kép [double-clicks] trên một phần tử.
mousedown mouseenter xẩy ra khi con trỏ di chuyển vào một phần tử. Sự kiện mouseover xẩy ra khi con trỏ di chuyển vào một phần tử hoặc di chuyển vào một trong các phần tử con của nó.
Sự kiện xẩy ra khi người dùng nhấn một nút chuột lên trên một phần tử.
mouseup mouseleave xẩy ra khi con trỏ di chuyển ra khỏi một phần tử. Sự kiện mouseout xẩy ra khi con trỏ di chuyển ra khỏi một phần tử hoặc di chuyển ra khỏi một trong các phần tử con của nó.
Sự kiện xẩy ra khi người dùng nhả tay ra khỏi nút của chuột đang nhấn trên một phần tử. mouseenter vs mouseover, mouseleave vs mouseout:
mouseenter
Javascript Mouse Events
#target-div {
width: 320px;
height: 150px;
background: blue;
}
#target-div > div {
width: 50px;
height: 80px;
margin: 40px 0 0 40px;
padding: 5px 0 0 5px;
float: left;
background: yellow;
}
mouseenter vs mouseover
mouseleave vs mouseout
Child
Child
Child
Statistics:
enter-vs-over-leave-vs-out.js
ul {
pointer-events: none;
}
0Sự kiện xẩy ra khi con trỏ [pointer] di chuyển vào một phần tử.
mousemove-example.html
ul {
pointer-events: none;
}
1mousemove-example.js
ul {
pointer-events: none;
}
2mouseleave
Sự kiện xẩy ra khi con trỏ [pointer] di chuyển ra khỏi một phần tử. là interface con của UIEvent, vì vậy nó thừa kế các thuộc tính [property] và các phương thức từ interface này.
- TODO Link?
key
altKey | Trả về true nếu phím "ALT" bị nhấn khi sự kiện chuột xẩy ra, ngược lại trả về false. true nếu phím "ALT" bị nhấn khi sự kiện chuột xẩy ra, ngược lại trả về false. |
ctrlKey | Trả về true nếu phím "CTRL" bị nhấn khi sự kiện chuột xẩy ra, ngược lại trả về false. true nếu phím "CTRL" bị nhấn khi sự kiện chuột xẩy ra, ngược lại trả về false. |
shiftKey | Trả về true nếu phím "SHIFT" bị nhấn khi sự kiện chuột xẩy ra, ngược lại trả về false. true nếu phím "SHIFT" bị nhấn khi sự kiện chuột xẩy ra, ngược lại trả về false. |
metaKey | Trả về true nếu phím "META" bị nhấn khi sự kiện chuột xẩy ra, ngược lại trả về false. true nếu phím "META" bị nhấn khi sự kiện chuột xẩy ra, ngược lại trả về false. |
Ví dụ với thuộc tính ctrlKey: ctrlKey:
prop-ctrlKey-example.html
ul {
pointer-events: none;
}
3Position:
altKey | Trả về true nếu phím "ALT" bị nhấn khi sự kiện chuột xẩy ra, ngược lại trả về false. |
ctrlKey | Trả về true nếu phím "CTRL" bị nhấn khi sự kiện chuột xẩy ra, ngược lại trả về false. |
shiftKey | |
Trả về true nếu phím "SHIFT" bị nhấn khi sự kiện chuột xẩy ra, ngược lại trả về false. | metaKey |
Trả về true nếu phím "META" bị nhấn khi sự kiện chuột xẩy ra, ngược lại trả về false. | Ví dụ với thuộc tính ctrlKey: |
shiftKey | |
Trả về true nếu phím "SHIFT" bị nhấn khi sự kiện chuột xẩy ra, ngược lại trả về false. | metaKey document [page]. |
Trả về true nếu phím "META" bị nhấn khi sự kiện chuột xẩy ra, ngược lại trả về false. | Ví dụ với thuộc tính ctrlKey: document [page]. |
shiftKey | |
Trả về true nếu phím "SHIFT" bị nhấn khi sự kiện chuột xẩy ra, ngược lại trả về false. | metaKey |
Trả về true nếu phím "META" bị nhấn khi sự kiện chuột xẩy ra, ngược lại trả về false. | Ví dụ với thuộc tính ctrlKey: |
shiftKey | |
Trả về true nếu phím "SHIFT" bị nhấn khi sự kiện chuột xẩy ra, ngược lại trả về false. | metaKey mousemove cuối cùng. |
Trả về true nếu phím "META" bị nhấn khi sự kiện chuột xẩy ra, ngược lại trả về false. | Ví dụ với thuộc tính ctrlKey: mousemove cuối cùng. |
prop-positions-example.html
ul {
pointer-events: none;
}
4prop-positions-example.js
ul {
pointer-events: none;
}
5Position:
clientX | Trả về tọa độ theo phương nằm ngang của con trỏ chuột, liên quan đến cửa sổ hiện tại, khi sự kiện chuột kích hoạt. |
clientY | Trả về tọa độ theo phương thẳng đứng của con trỏ chuột, liên quan đến cửa sổ hiện tại, khi sự kiện chuột kích hoạt. |
shiftKey | shiftKey |
Trả về true nếu phím "SHIFT" bị nhấn khi sự kiện chuột xẩy ra, ngược lại trả về false. | metaKey |
event.button:
- Trả về true nếu phím "META" bị nhấn khi sự kiện chuột xẩy ra, ngược lại trả về false. : Nút chính, thường là nút chuột trái.
- Ví dụ với thuộc tính ctrlKey: : Nút phụ trợ [Auxiliary button], thường là nút bánh xe, hoặc nút giữa [Nếu có].
- Position: : Nút thứ 2, thường là nút chuột phải.
- clientX : Nút thứ 4, cụ thể là nút Browser Back.
- Trả về tọa độ theo phương nằm ngang của con trỏ chuột, liên quan đến cửa sổ hiện tại, khi sự kiện chuột kích hoạt. : Nút thứ 5, cụ thể là nút Browser Forward.
event.buttons:
- clientY : Không có nút nào hoặc không được khởi tạo.
- Trả về tọa độ theo phương thẳng đứng của con trỏ chuột, liên quan đến cửa sổ hiện tại, khi sự kiện chuột kích hoạt. : Nút chính, thường là nút chuột trái.
- : Nút thứ 2, thường là nút chuột phải.
- offsetX : Nút phụ trợ [Auxilary button], thường là nút bánh xe hoặc nút giữa.
- Trả về tọa độ theo phương nằm ngang của con trỏ chuột, liên quan đến phần tử phát ra sự kiện chuột. : Nút thứ 4, thường là nút "Browser Back".
- offsetY : Nút thứ 5, thường là nút "Browser Forward".
Trả về tọa độ theo phương thẳng đứng của con trỏ chuột, liên quan đến phần tử phát ra sự kiện chuột. có thể trả về một giá trị khác các giá trị ở trên. Chẳng hạn event.buttons trả về 3 nếu bạn nhấn đồng thời cả 2 nút chuột trái và nút chuột phải.
prop-button-buttons-example.html
ul {
pointer-events: none;
}
6pageX
Trả về tọa độ theo phương nằm ngang của con trỏ chuột, liên quan đến document [page]. | pageY |