Vô hiệu hóa sao chép nội dung, Chế độ sao chép nội dung cần thiết cho một trang web. Nó không chống lại việc các đối tượng sao chép có chuyên môn về công nghệ thông tin, nhưng với các đối tượng sao chép thông thường thì rất hữu hiệu
Thực hiện
Sử dụng kết hợp cả Jquery và Css để hạn chế sao chép nội dung. Đoạn mã nhỏ dưới đây phải được sao chép vào tệp js và css của chủ đề. hãy sử dụng nó vào chủ đề con
/* Css prevent blacked out text on the site */ body{ -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; }
Thêm mã Jquery để vô hiệu hóa sao chép nội dung với khả năng chặn bôi đen, chặn chuột phải, chặn F12, chặn Ctrl I, chặn Ctrl J, chặn Ctrl U, chặn Ctrl S trên macOS
// Disable copy content, prevent blacked out text, prevent "I" key, "J" key, "S" key + macOS, "U" key, "F12" key jQuery[document].ready[function[]{ jQuery[function[] { jQuery[this].bind["contextmenu", function[event] { event.preventDefault[]; alert['Right click disable in this site! Chuột phải đã được vô hiệu hóa trên site này !'] }]; }]; [function[] { 'use strict'; let style = document.createElement['style']; style.innerHTML = '*{ user-select: none !important; }'; document.body.appendChild[style]; }][]; window.onload = function [] { document.addEventListener["contextmenu", function [e] { e.preventDefault[]; }, false]; document.addEventListener["keydown", function [e] { if [e.ctrlKey && e.shiftKey && e.keyCode == 73] { disabledEvent[e]; } if [e.ctrlKey && e.shiftKey && e.keyCode == 74] { disabledEvent[e]; } if [e.keyCode == 83 && [navigator.platform.match["Mac"] ? e.metaKey : e.ctrlKey]] { disabledEvent[e]; } if [e.ctrlKey && e.keyCode == 85] { disabledEvent[e]; } if [event.keyCode == 123] { disabledEvent[e]; } }, false]; function disabledEvent[e] { if [e.stopPropagation] { e.stopPropagation[]; } else if [window.event] { window.event.cancelBubble = true; } e.preventDefault[]; return false; } } }];
Bạn cũng có thể thêm mã trên bằng cách này
Tạo 2 tệp và thư mục /assets/js/main. js và /assets/css/main. css nằm trong chủ đề con. Sao chép toàn bộ Css và Js đập chúng vào. Copy đoạn code dưới đây dán vào file function. php
// Enqueue required fonts, scripts, and styles. add_action[ 'wp_enqueue_scripts', 'favorite_enqueue_scripts' ]; function favorite_enqueue_scripts[] { wp_enqueue_script[ 'wph_mainjs', get_stylesheet_directory_uri[] . '/assets/js/main.js' , 'jquery' , '' , true ]; wp_enqueue_style[ 'wph_maincss', get_stylesheet_directory_uri[] . '/assets/css/main.css' ]; }
Lời kết
Như vậy các bạn đã có thể ngăn chặn việc sao chép nội dung một thủ thuật từ những người dùng thông thường
Tôi hy vọng bạn tìm thấy hướng dẫn này hữu ích. Nếu vậy, hãy xem xét chia sẻ nó với khán giả của bạn
Trình xử lý này được gán cho
// Disable copy content, prevent blacked out text, prevent "I" key, "J" key, "S" key + macOS, "U" key, "F12" key jQuery[document].ready[function[]{ jQuery[function[] { jQuery[this].bind["contextmenu", function[event] { event.preventDefault[]; alert['Right click disable in this site! Chuột phải đã được vô hiệu hóa trên site này !'] }]; }]; [function[] { 'use strict'; let style = document.createElement['style']; style.innerHTML = '*{ user-select: none !important; }'; document.body.appendChild[style]; }][]; window.onload = function [] { document.addEventListener["contextmenu", function [e] { e.preventDefault[]; }, false]; document.addEventListener["keydown", function [e] { if [e.ctrlKey && e.shiftKey && e.keyCode == 73] { disabledEvent[e]; } if [e.ctrlKey && e.shiftKey && e.keyCode == 74] { disabledEvent[e]; } if [e.keyCode == 83 && [navigator.platform.match["Mac"] ? e.metaKey : e.ctrlKey]] { disabledEvent[e]; } if [e.ctrlKey && e.keyCode == 85] { disabledEvent[e]; } if [event.keyCode == 123] { disabledEvent[e]; } }, false]; function disabledEvent[e] { if [e.stopPropagation] { e.stopPropagation[]; } else if [window.event] { window.event.cancelBubble = true; } e.preventDefault[]; return false; } } }];01, nhưng cũng chạy nếu bạn nhấp vào bất kỳ thẻ lồng nhau nào như
body * {
margin: 10px;
border: 1px solid blue;
}
FORM
DIV
P
0 hoặc
body * {
margin: 10px;
border: 1px solid blue;
}
FORM
DIV
P
1
If you click on EM
, the handler on DIV
runs.
Nó không phải là một chút kỳ lạ?
Nguyên tắc sủi bọt rất đơn giản
Khi một sự kiện xảy ra trên một phần tử, đầu tiên nó sẽ chạy các trình xử lý trên đó, sau đó trên phần tử cha của nó, sau đó tất cả các tổ tiên khác
Giả sử chúng ta có 3 phần tử lồng nhau
body * {
margin: 10px;
border: 1px solid blue;
}
FORM
DIV
P
4 với một trình xử lý trên mỗi phần tử đó
body * {
margin: 10px;
border: 1px solid blue;
}
FORM
DIV
P
Một cú nhấp chuột vào bên trong
body * {
margin: 10px;
border: 1px solid blue;
}
FORM
DIV
P
5 lần đầu tiên chạy
body * {
margin: 10px;
border: 1px solid blue;
}
FORM
DIV
P
6- Trên đó
5body * { margin: 10px; border: 1px solid blue; } FORM
DIVP
- Sau đó, trên
// Disable copy content, prevent blacked out text, prevent "I" key, "J" key, "S" key + macOS, "U" key, "F12" key jQuery[document].ready[function[]{ jQuery[function[] { jQuery[this].bind["contextmenu", function[event] { event.preventDefault[]; alert['Right click disable in this site! Chuột phải đã được vô hiệu hóa trên site này !'] }]; }]; [function[] { 'use strict'; let style = document.createElement['style']; style.innerHTML = '*{ user-select: none !important; }'; document.body.appendChild[style]; }][]; window.onload = function [] { document.addEventListener["contextmenu", function [e] { e.preventDefault[]; }, false]; document.addEventListener["keydown", function [e] { if [e.ctrlKey && e.shiftKey && e.keyCode == 73] { disabledEvent[e]; } if [e.ctrlKey && e.shiftKey && e.keyCode == 74] { disabledEvent[e]; } if [e.keyCode == 83 && [navigator.platform.match["Mac"] ? e.metaKey : e.ctrlKey]] { disabledEvent[e]; } if [e.ctrlKey && e.keyCode == 85] { disabledEvent[e]; } if [event.keyCode == 123] { disabledEvent[e]; } }, false]; function disabledEvent[e] { if [e.stopPropagation] { e.stopPropagation[]; } else if [window.event] { window.event.cancelBubble = true; } e.preventDefault[]; return false; } } }];
01 bên ngoài - Sau đó, ở bên ngoài
9body * { margin: 10px; border: 1px solid blue; } FORM
DIVP
- Và cứ tiếp tục như vậy cho đến đối tượng
// Disable copy content, prevent blacked out text, prevent "I" key, "J" key, "S" key + macOS, "U" key, "F12" key jQuery[document].ready[function[]{ jQuery[function[] { jQuery[this].bind["contextmenu", function[event] { event.preventDefault[]; alert['Right click disable in this site! Chuột phải đã được vô hiệu hóa trên site này !'] }]; }]; [function[] { 'use strict'; let style = document.createElement['style']; style.innerHTML = '*{ user-select: none !important; }'; document.body.appendChild[style]; }][]; window.onload = function [] { document.addEventListener["contextmenu", function [e] { e.preventDefault[]; }, false]; document.addEventListener["keydown", function [e] { if [e.ctrlKey && e.shiftKey && e.keyCode == 73] { disabledEvent[e]; } if [e.ctrlKey && e.shiftKey && e.keyCode == 74] { disabledEvent[e]; } if [e.keyCode == 83 && [navigator.platform.match["Mac"] ? e.metaKey : e.ctrlKey]] { disabledEvent[e]; } if [e.ctrlKey && e.keyCode == 85] { disabledEvent[e]; } if [event.keyCode == 123] { disabledEvent[e]; } }, false]; function disabledEvent[e] { if [e.stopPropagation] { e.stopPropagation[]; } else if [window.event] { window.event.cancelBubble = true; } e.preventDefault[]; return false; } } }];
30
Vì vậy, nếu chúng tôi nhấp vào
body * {
margin: 10px;
border: 1px solid blue;
}
FORM
DIV
P
5, thì chúng tôi sẽ thấy 3 cảnh báo. // Disable copy content, prevent blacked out text, prevent "I" key, "J" key, "S" key + macOS, "U" key, "F12" key jQuery[document].ready[function[]{ jQuery[function[] { jQuery[this].bind["contextmenu", function[event] { event.preventDefault[]; alert['Right click disable in this site! Chuột phải đã được vô hiệu hóa trên site này !'] }]; }]; [function[] { 'use strict'; let style = document.createElement['style']; style.innerHTML = '*{ user-select: none !important; }'; document.body.appendChild[style]; }][]; window.onload = function [] { document.addEventListener["contextmenu", function [e] { e.preventDefault[]; }, false]; document.addEventListener["keydown", function [e] { if [e.ctrlKey && e.shiftKey && e.keyCode == 73] { disabledEvent[e]; } if [e.ctrlKey && e.shiftKey && e.keyCode == 74] { disabledEvent[e]; } if [e.keyCode == 83 && [navigator.platform.match["Mac"] ? e.metaKey : e.ctrlKey]] { disabledEvent[e]; } if [e.ctrlKey && e.keyCode == 85] { disabledEvent[e]; } if [event.keyCode == 123] { disabledEvent[e]; } }, false]; function disabledEvent[e] { if [e.stopPropagation] { e.stopPropagation[]; } else if [window.event] { window.event.cancelBubble = true; } e.preventDefault[]; return false; } } }];32 →
// Disable copy content, prevent blacked out text, prevent "I" key, "J" key, "S" key + macOS, "U" key, "F12" key jQuery[document].ready[function[]{ jQuery[function[] { jQuery[this].bind["contextmenu", function[event] { event.preventDefault[]; alert['Right click disable in this site! Chuột phải đã được vô hiệu hóa trên site này !'] }]; }]; [function[] { 'use strict'; let style = document.createElement['style']; style.innerHTML = '*{ user-select: none !important; }'; document.body.appendChild[style]; }][]; window.onload = function [] { document.addEventListener["contextmenu", function [e] { e.preventDefault[]; }, false]; document.addEventListener["keydown", function [e] { if [e.ctrlKey && e.shiftKey && e.keyCode == 73] { disabledEvent[e]; } if [e.ctrlKey && e.shiftKey && e.keyCode == 74] { disabledEvent[e]; } if [e.keyCode == 83 && [navigator.platform.match["Mac"] ? e.metaKey : e.ctrlKey]] { disabledEvent[e]; } if [e.ctrlKey && e.keyCode == 85] { disabledEvent[e]; } if [event.keyCode == 123] { disabledEvent[e]; } }, false]; function disabledEvent[e] { if [e.stopPropagation] { e.stopPropagation[]; } else if [window.event] { window.event.cancelBubble = true; } e.preventDefault[]; return false; } } }];33 →
// Disable copy content, prevent blacked out text, prevent "I" key, "J" key, "S" key + macOS, "U" key, "F12" key jQuery[document].ready[function[]{ jQuery[function[] { jQuery[this].bind["contextmenu", function[event] { event.preventDefault[]; alert['Right click disable in this site! Chuột phải đã được vô hiệu hóa trên site này !'] }]; }]; [function[] { 'use strict'; let style = document.createElement['style']; style.innerHTML = '*{ user-select: none !important; }'; document.body.appendChild[style]; }][]; window.onload = function [] { document.addEventListener["contextmenu", function [e] { e.preventDefault[]; }, false]; document.addEventListener["keydown", function [e] { if [e.ctrlKey && e.shiftKey && e.keyCode == 73] { disabledEvent[e]; } if [e.ctrlKey && e.shiftKey && e.keyCode == 74] { disabledEvent[e]; } if [e.keyCode == 83 && [navigator.platform.match["Mac"] ? e.metaKey : e.ctrlKey]] { disabledEvent[e]; } if [e.ctrlKey && e.keyCode == 85] { disabledEvent[e]; } if [event.keyCode == 123] { disabledEvent[e]; } }, false]; function disabledEvent[e] { if [e.stopPropagation] { e.stopPropagation[]; } else if [window.event] { window.event.cancelBubble = true; } e.preventDefault[]; return false; } } }];34
Quá trình này được gọi là "sủi bọt", bởi vì các sự kiện "bong bóng" từ yếu tố bên trong cho đến cha mẹ giống như bong bóng trong nước
Hầu như tất cả các sự kiện bong bóng
Từ khóa trong cụm từ này là “gần như”
Chẳng hạn, một sự kiện
// Disable copy content, prevent blacked out text, prevent "I" key, "J" key, "S" key + macOS, "U" key, "F12" key jQuery[document].ready[function[]{ jQuery[function[] { jQuery[this].bind["contextmenu", function[event] { event.preventDefault[]; alert['Right click disable in this site! Chuột phải đã được vô hiệu hóa trên site này !'] }]; }]; [function[] { 'use strict'; let style = document.createElement['style']; style.innerHTML = '*{ user-select: none !important; }'; document.body.appendChild[style]; }][]; window.onload = function [] { document.addEventListener["contextmenu", function [e] { e.preventDefault[]; }, false]; document.addEventListener["keydown", function [e] { if [e.ctrlKey && e.shiftKey && e.keyCode == 73] { disabledEvent[e]; } if [e.ctrlKey && e.shiftKey && e.keyCode == 74] { disabledEvent[e]; } if [e.keyCode == 83 && [navigator.platform.match["Mac"] ? e.metaKey : e.ctrlKey]] { disabledEvent[e]; } if [e.ctrlKey && e.keyCode == 85] { disabledEvent[e]; } if [event.keyCode == 123] { disabledEvent[e]; } }, false]; function disabledEvent[e] { if [e.stopPropagation] { e.stopPropagation[]; } else if [window.event] { window.event.cancelBubble = true; } e.preventDefault[]; return false; } } }];35 không bong bóng. Còn có những ví dụ khác nữa, chúng ta sẽ gặp chúng. Nhưng đó vẫn là một ngoại lệ, chứ không phải là một quy luật, hầu hết các sự kiện đều có bong bóng
Trình xử lý trên phần tử cha luôn có thể nhận thông tin chi tiết về nơi nó thực sự xảy ra
Phần tử được lồng sâu nhất gây ra sự kiện được gọi là phần tử đích, có thể truy cập dưới dạng
// Disable copy content, prevent blacked out text, prevent "I" key, "J" key, "S" key + macOS, "U" key, "F12" key jQuery[document].ready[function[]{ jQuery[function[] { jQuery[this].bind["contextmenu", function[event] { event.preventDefault[]; alert['Right click disable in this site! Chuột phải đã được vô hiệu hóa trên site này !'] }]; }]; [function[] { 'use strict'; let style = document.createElement['style']; style.innerHTML = '*{ user-select: none !important; }'; document.body.appendChild[style]; }][]; window.onload = function [] { document.addEventListener["contextmenu", function [e] { e.preventDefault[]; }, false]; document.addEventListener["keydown", function [e] { if [e.ctrlKey && e.shiftKey && e.keyCode == 73] { disabledEvent[e]; } if [e.ctrlKey && e.shiftKey && e.keyCode == 74] { disabledEvent[e]; } if [e.keyCode == 83 && [navigator.platform.match["Mac"] ? e.metaKey : e.ctrlKey]] { disabledEvent[e]; } if [e.ctrlKey && e.keyCode == 85] { disabledEvent[e]; } if [event.keyCode == 123] { disabledEvent[e]; } }, false]; function disabledEvent[e] { if [e.stopPropagation] { e.stopPropagation[]; } else if [window.event] { window.event.cancelBubble = true; } e.preventDefault[]; return false; } } }];36
Lưu ý sự khác biệt từ
// Disable copy content, prevent blacked out text, prevent "I" key, "J" key, "S" key + macOS, "U" key, "F12" key jQuery[document].ready[function[]{ jQuery[function[] { jQuery[this].bind["contextmenu", function[event] { event.preventDefault[]; alert['Right click disable in this site! Chuột phải đã được vô hiệu hóa trên site này !'] }]; }]; [function[] { 'use strict'; let style = document.createElement['style']; style.innerHTML = '*{ user-select: none !important; }'; document.body.appendChild[style]; }][]; window.onload = function [] { document.addEventListener["contextmenu", function [e] { e.preventDefault[]; }, false]; document.addEventListener["keydown", function [e] { if [e.ctrlKey && e.shiftKey && e.keyCode == 73] { disabledEvent[e]; } if [e.ctrlKey && e.shiftKey && e.keyCode == 74] { disabledEvent[e]; } if [e.keyCode == 83 && [navigator.platform.match["Mac"] ? e.metaKey : e.ctrlKey]] { disabledEvent[e]; } if [e.ctrlKey && e.keyCode == 85] { disabledEvent[e]; } if [event.keyCode == 123] { disabledEvent[e]; } }, false]; function disabledEvent[e] { if [e.stopPropagation] { e.stopPropagation[]; } else if [window.event] { window.event.cancelBubble = true; } e.preventDefault[]; return false; } } }];37 [=______138]
// Disable copy content, prevent blacked out text, prevent "I" key, "J" key, "S" key + macOS, "U" key, "F12" key jQuery[document].ready[function[]{ jQuery[function[] { jQuery[this].bind["contextmenu", function[event] { event.preventDefault[]; alert['Right click disable in this site! Chuột phải đã được vô hiệu hóa trên site này !'] }]; }]; [function[] { 'use strict'; let style = document.createElement['style']; style.innerHTML = '*{ user-select: none !important; }'; document.body.appendChild[style]; }][]; window.onload = function [] { document.addEventListener["contextmenu", function [e] { e.preventDefault[]; }, false]; document.addEventListener["keydown", function [e] { if [e.ctrlKey && e.shiftKey && e.keyCode == 73] { disabledEvent[e]; } if [e.ctrlKey && e.shiftKey && e.keyCode == 74] { disabledEvent[e]; } if [e.keyCode == 83 && [navigator.platform.match["Mac"] ? e.metaKey : e.ctrlKey]] { disabledEvent[e]; } if [e.ctrlKey && e.keyCode == 85] { disabledEvent[e]; } if [event.keyCode == 123] { disabledEvent[e]; } }, false]; function disabledEvent[e] { if [e.stopPropagation] { e.stopPropagation[]; } else if [window.event] { window.event.cancelBubble = true; } e.preventDefault[]; return false; } } }];
36 – là phần tử “mục tiêu” bắt đầu sự kiện, nó không thay đổi trong quá trình tạo bọt// Disable copy content, prevent blacked out text, prevent "I" key, "J" key, "S" key + macOS, "U" key, "F12" key jQuery[document].ready[function[]{ jQuery[function[] { jQuery[this].bind["contextmenu", function[event] { event.preventDefault[]; alert['Right click disable in this site! Chuột phải đã được vô hiệu hóa trên site này !'] }]; }]; [function[] { 'use strict'; let style = document.createElement['style']; style.innerHTML = '*{ user-select: none !important; }'; document.body.appendChild[style]; }][]; window.onload = function [] { document.addEventListener["contextmenu", function [e] { e.preventDefault[]; }, false]; document.addEventListener["keydown", function [e] { if [e.ctrlKey && e.shiftKey && e.keyCode == 73] { disabledEvent[e]; } if [e.ctrlKey && e.shiftKey && e.keyCode == 74] { disabledEvent[e]; } if [e.keyCode == 83 && [navigator.platform.match["Mac"] ? e.metaKey : e.ctrlKey]] { disabledEvent[e]; } if [e.ctrlKey && e.keyCode == 85] { disabledEvent[e]; } if [event.keyCode == 123] { disabledEvent[e]; } }, false]; function disabledEvent[e] { if [e.stopPropagation] { e.stopPropagation[]; } else if [window.event] { window.event.cancelBubble = true; } e.preventDefault[]; return false; } } }];
37 – là phần tử “hiện tại”, phần tử có trình xử lý hiện đang chạy trên đó
Chẳng hạn, nếu chúng ta có một trình xử lý duy nhất là
// Enqueue required fonts, scripts, and styles. add_action[ 'wp_enqueue_scripts', 'favorite_enqueue_scripts' ]; function favorite_enqueue_scripts[] { wp_enqueue_script[ 'wph_mainjs', get_stylesheet_directory_uri[] . '/assets/js/main.js' , 'jquery' , '' , true ]; wp_enqueue_style[ 'wph_maincss', get_stylesheet_directory_uri[] . '/assets/css/main.css' ]; }41, thì nó có thể “bắt” tất cả các nhấp chuột bên trong biểu mẫu. Bất kể nhấp chuột xảy ra ở đâu, nó sẽ nổi lên đến
body * {
margin: 10px;
border: 1px solid blue;
}
FORM
DIV
P
9 và chạy trình xử lýTrong trình xử lý
// Enqueue required fonts, scripts, and styles. add_action[ 'wp_enqueue_scripts', 'favorite_enqueue_scripts' ]; function favorite_enqueue_scripts[] { wp_enqueue_script[ 'wph_mainjs', get_stylesheet_directory_uri[] . '/assets/js/main.js' , 'jquery' , '' , true ]; wp_enqueue_style[ 'wph_maincss', get_stylesheet_directory_uri[] . '/assets/css/main.css' ]; }41
// Disable copy content, prevent blacked out text, prevent "I" key, "J" key, "S" key + macOS, "U" key, "F12" key jQuery[document].ready[function[]{ jQuery[function[] { jQuery[this].bind["contextmenu", function[event] { event.preventDefault[]; alert['Right click disable in this site! Chuột phải đã được vô hiệu hóa trên site này !'] }]; }]; [function[] { 'use strict'; let style = document.createElement['style']; style.innerHTML = '*{ user-select: none !important; }'; document.body.appendChild[style]; }][]; window.onload = function [] { document.addEventListener["contextmenu", function [e] { e.preventDefault[]; }, false]; document.addEventListener["keydown", function [e] { if [e.ctrlKey && e.shiftKey && e.keyCode == 73] { disabledEvent[e]; } if [e.ctrlKey && e.shiftKey && e.keyCode == 74] { disabledEvent[e]; } if [e.keyCode == 83 && [navigator.platform.match["Mac"] ? e.metaKey : e.ctrlKey]] { disabledEvent[e]; } if [e.ctrlKey && e.keyCode == 85] { disabledEvent[e]; } if [event.keyCode == 123] { disabledEvent[e]; } }, false]; function disabledEvent[e] { if [e.stopPropagation] { e.stopPropagation[]; } else if [window.event] { window.event.cancelBubble = true; } e.preventDefault[]; return false; } } }];
37 [=// Disable copy content, prevent blacked out text, prevent "I" key, "J" key, "S" key + macOS, "U" key, "F12" key jQuery[document].ready[function[]{ jQuery[function[] { jQuery[this].bind["contextmenu", function[event] { event.preventDefault[]; alert['Right click disable in this site! Chuột phải đã được vô hiệu hóa trên site này !'] }]; }]; [function[] { 'use strict'; let style = document.createElement['style']; style.innerHTML = '*{ user-select: none !important; }'; document.body.appendChild[style]; }][]; window.onload = function [] { document.addEventListener["contextmenu", function [e] { e.preventDefault[]; }, false]; document.addEventListener["keydown", function [e] { if [e.ctrlKey && e.shiftKey && e.keyCode == 73] { disabledEvent[e]; } if [e.ctrlKey && e.shiftKey && e.keyCode == 74] { disabledEvent[e]; } if [e.keyCode == 83 && [navigator.platform.match["Mac"] ? e.metaKey : e.ctrlKey]] { disabledEvent[e]; } if [e.ctrlKey && e.keyCode == 85] { disabledEvent[e]; } if [event.keyCode == 123] { disabledEvent[e]; } }, false]; function disabledEvent[e] { if [e.stopPropagation] { e.stopPropagation[]; } else if [window.event] { window.event.cancelBubble = true; } e.preventDefault[]; return false; } } }];
38] là phần tử
9, bởi vì trình xử lý chạy trên nóbody * { margin: 10px; border: 1px solid blue; } FORM
DIVP
// Disable copy content, prevent blacked out text, prevent "I" key, "J" key, "S" key + macOS, "U" key, "F12" key jQuery[document].ready[function[]{ jQuery[function[] { jQuery[this].bind["contextmenu", function[event] { event.preventDefault[]; alert['Right click disable in this site! Chuột phải đã được vô hiệu hóa trên site này !'] }]; }]; [function[] { 'use strict'; let style = document.createElement['style']; style.innerHTML = '*{ user-select: none !important; }'; document.body.appendChild[style]; }][]; window.onload = function [] { document.addEventListener["contextmenu", function [e] { e.preventDefault[]; }, false]; document.addEventListener["keydown", function [e] { if [e.ctrlKey && e.shiftKey && e.keyCode == 73] { disabledEvent[e]; } if [e.ctrlKey && e.shiftKey && e.keyCode == 74] { disabledEvent[e]; } if [e.keyCode == 83 && [navigator.platform.match["Mac"] ? e.metaKey : e.ctrlKey]] { disabledEvent[e]; } if [e.ctrlKey && e.keyCode == 85] { disabledEvent[e]; } if [event.keyCode == 123] { disabledEvent[e]; } }, false]; function disabledEvent[e] { if [e.stopPropagation] { e.stopPropagation[]; } else if [window.event] { window.event.cancelBubble = true; } e.preventDefault[]; return false; } } }];
36 là phần tử thực sự bên trong biểu mẫu đã được nhấp vào
Kiểm tra nó ra
Kết quả
kịch bản. js
ví dụ. css
mục lục. html
// Disable copy content, prevent blacked out text, prevent "I" key, "J" key, "S" key + macOS, "U" key, "F12" key jQuery[document].ready[function[]{ jQuery[function[] { jQuery[this].bind["contextmenu", function[event] { event.preventDefault[]; alert['Right click disable in this site! Chuột phải đã được vô hiệu hóa trên site này !'] }]; }]; [function[] { 'use strict'; let style = document.createElement['style']; style.innerHTML = '*{ user-select: none !important; }'; document.body.appendChild[style]; }][]; window.onload = function [] { document.addEventListener["contextmenu", function [e] { e.preventDefault[]; }, false]; document.addEventListener["keydown", function [e] { if [e.ctrlKey && e.shiftKey && e.keyCode == 73] { disabledEvent[e]; } if [e.ctrlKey && e.shiftKey && e.keyCode == 74] { disabledEvent[e]; } if [e.keyCode == 83 && [navigator.platform.match["Mac"] ? e.metaKey : e.ctrlKey]] { disabledEvent[e]; } if [e.ctrlKey && e.keyCode == 85] { disabledEvent[e]; } if [event.keyCode == 123] { disabledEvent[e]; } }, false]; function disabledEvent[e] { if [e.stopPropagation] { e.stopPropagation[]; } else if [window.event] { window.event.cancelBubble = true; } e.preventDefault[]; return false; } } }];3
// Enqueue required fonts, scripts, and styles. add_action[ 'wp_enqueue_scripts', 'favorite_enqueue_scripts' ]; function favorite_enqueue_scripts[] { wp_enqueue_script[ 'wph_mainjs', get_stylesheet_directory_uri[] . '/assets/js/main.js' , 'jquery' , '' , true ]; wp_enqueue_style[ 'wph_maincss', get_stylesheet_directory_uri[] . '/assets/css/main.css' ]; }4
body * {
margin: 10px;
border: 1px solid blue;
}
FORM
DIV
P
3Có thể là
// Disable copy content, prevent blacked out text, prevent "I" key, "J" key, "S" key + macOS, "U" key, "F12" key jQuery[document].ready[function[]{ jQuery[function[] { jQuery[this].bind["contextmenu", function[event] { event.preventDefault[]; alert['Right click disable in this site! Chuột phải đã được vô hiệu hóa trên site này !'] }]; }]; [function[] { 'use strict'; let style = document.createElement['style']; style.innerHTML = '*{ user-select: none !important; }'; document.body.appendChild[style]; }][]; window.onload = function [] { document.addEventListener["contextmenu", function [e] { e.preventDefault[]; }, false]; document.addEventListener["keydown", function [e] { if [e.ctrlKey && e.shiftKey && e.keyCode == 73] { disabledEvent[e]; } if [e.ctrlKey && e.shiftKey && e.keyCode == 74] { disabledEvent[e]; } if [e.keyCode == 83 && [navigator.platform.match["Mac"] ? e.metaKey : e.ctrlKey]] { disabledEvent[e]; } if [e.ctrlKey && e.keyCode == 85] { disabledEvent[e]; } if [event.keyCode == 123] { disabledEvent[e]; } }, false]; function disabledEvent[e] { if [e.stopPropagation] { e.stopPropagation[]; } else if [window.event] { window.event.cancelBubble = true; } e.preventDefault[]; return false; } } }];36 có thể bằng với
// Disable copy content, prevent blacked out text, prevent "I" key, "J" key, "S" key + macOS, "U" key, "F12" key jQuery[document].ready[function[]{ jQuery[function[] { jQuery[this].bind["contextmenu", function[event] { event.preventDefault[]; alert['Right click disable in this site! Chuột phải đã được vô hiệu hóa trên site này !'] }]; }]; [function[] { 'use strict'; let style = document.createElement['style']; style.innerHTML = '*{ user-select: none !important; }'; document.body.appendChild[style]; }][]; window.onload = function [] { document.addEventListener["contextmenu", function [e] { e.preventDefault[]; }, false]; document.addEventListener["keydown", function [e] { if [e.ctrlKey && e.shiftKey && e.keyCode == 73] { disabledEvent[e]; } if [e.ctrlKey && e.shiftKey && e.keyCode == 74] { disabledEvent[e]; } if [e.keyCode == 83 && [navigator.platform.match["Mac"] ? e.metaKey : e.ctrlKey]] { disabledEvent[e]; } if [e.ctrlKey && e.keyCode == 85] { disabledEvent[e]; } if [event.keyCode == 123] { disabledEvent[e]; } }, false]; function disabledEvent[e] { if [e.stopPropagation] { e.stopPropagation[]; } else if [window.event] { window.event.cancelBubble = true; } e.preventDefault[]; return false; } } }];37 – điều này xảy ra khi nhấp chuột được thực hiện trực tiếp trên phần tử
body * {
margin: 10px;
border: 1px solid blue;
}
FORM
DIV
P
9Một sự kiện sủi bọt đi thẳng từ phần tử đích lên. Thông thường, nó đi lên cho đến
body * {
margin: 10px;
border: 1px solid blue;
}
FORM
DIV
P
31, sau đó đến đối tượng // Disable copy content, prevent blacked out text, prevent "I" key, "J" key, "S" key + macOS, "U" key, "F12" key jQuery[document].ready[function[]{ jQuery[function[] { jQuery[this].bind["contextmenu", function[event] { event.preventDefault[]; alert['Right click disable in this site! Chuột phải đã được vô hiệu hóa trên site này !'] }]; }]; [function[] { 'use strict'; let style = document.createElement['style']; style.innerHTML = '*{ user-select: none !important; }'; document.body.appendChild[style]; }][]; window.onload = function [] { document.addEventListener["contextmenu", function [e] { e.preventDefault[]; }, false]; document.addEventListener["keydown", function [e] { if [e.ctrlKey && e.shiftKey && e.keyCode == 73] { disabledEvent[e]; } if [e.ctrlKey && e.shiftKey && e.keyCode == 74] { disabledEvent[e]; } if [e.keyCode == 83 && [navigator.platform.match["Mac"] ? e.metaKey : e.ctrlKey]] { disabledEvent[e]; } if [e.ctrlKey && e.keyCode == 85] { disabledEvent[e]; } if [event.keyCode == 123] { disabledEvent[e]; } }, false]; function disabledEvent[e] { if [e.stopPropagation] { e.stopPropagation[]; } else if [window.event] { window.event.cancelBubble = true; } e.preventDefault[]; return false; } } }];30 và một số sự kiện thậm chí còn đạt đến
body * {
margin: 10px;
border: 1px solid blue;
}
FORM
DIV
P
33, gọi tất cả các trình xử lý trên đường dẫnNhưng bất kỳ trình xử lý nào cũng có thể quyết định rằng sự kiện đã được xử lý đầy đủ và ngừng tạo bọt
Phương pháp cho nó là
body * {
margin: 10px;
border: 1px solid blue;
}
FORM
DIV
P
34Chẳng hạn, ở đây
body * {
margin: 10px;
border: 1px solid blue;
}
FORM
DIV
P
35 không hoạt động nếu bạn nhấp vào
body * {
margin: 10px;
border: 1px solid blue;
}
FORM
DIV
P
36
body * {
margin: 10px;
border: 1px solid blue;
}
FORM
DIV
P
3Sự kiện. stopImmediatePropagation[]
Nếu một phần tử có nhiều trình xử lý sự kiện trong một sự kiện, thì ngay cả khi một trong số chúng ngừng sủi bọt, thì những phần tử khác vẫn thực thi
Nói cách khác,
body * {
margin: 10px;
border: 1px solid blue;
}
FORM
DIV
P
34 dừng di chuyển lên trên, nhưng trên phần tử hiện tại, tất cả các trình xử lý khác sẽ chạyĐể dừng sủi bọt và ngăn các trình xử lý trên phần tử hiện tại chạy, có một phương thức
body * {
margin: 10px;
border: 1px solid blue;
}
FORM
DIV
P
38. Sau đó, không có trình xử lý nào khác thực thiĐừng ngừng sủi bọt khi không có nhu cầu
Bong bóng là thuận tiện. Đừng dừng lại khi chưa có nhu cầu thực sự. rõ ràng và được nghĩ ra về mặt kiến trúc
Đôi khi
body * {
margin: 10px;
border: 1px solid blue;
}
FORM
DIV
P
34 tạo ra những cạm bẫy tiềm ẩn mà sau này có thể trở thành vấn đềVí dụ
- Chúng tôi tạo một menu lồng nhau. Mỗi menu con xử lý các lần nhấp vào các thành phần của nó và gọi
30 để menu bên ngoài không kích hoạtbody * { margin: 10px; border: 1px solid blue; } FORM
DIVP
- Sau đó, chúng tôi quyết định theo dõi các lần nhấp trên toàn bộ cửa sổ để theo dõi hành vi của người dùng [nơi mọi người nhấp]. Một số hệ thống phân tích làm điều đó. Thông thường, mã sử dụng
31 để bắt tất cả các nhấp chuộtbody * { margin: 10px; border: 1px solid blue; } FORM
DIVP
- Phân tích của chúng tôi sẽ không hoạt động trên khu vực mà nhấp chuột bị dừng bởi
30. Đáng buồn thay, chúng tôi đã có một "vùng chết"body * { margin: 10px; border: 1px solid blue; } FORM
DIVP
Thường không có nhu cầu thực sự để ngăn chặn bọt khí. Một nhiệm vụ dường như yêu cầu có thể được giải quyết bằng các phương tiện khác. Một trong số đó là sử dụng các sự kiện tùy chỉnh, chúng tôi sẽ đề cập đến chúng sau. Ngoài ra, chúng tôi có thể ghi dữ liệu của mình vào đối tượng
body * {
margin: 10px;
border: 1px solid blue;
}
FORM
DIV
P
33 trong một trình xử lý và đọc nó trong một trình xử lý khác, vì vậy chúng tôi có thể chuyển cho trình xử lý cha mẹ thông tin về quá trình xử lý bên dướiCó một giai đoạn xử lý sự kiện khác được gọi là "chụp". Nó hiếm khi được sử dụng trong mã thực, nhưng đôi khi có thể hữu ích
Sự kiện DOM tiêu chuẩn mô tả 3 giai đoạn lan truyền sự kiện
- Giai đoạn nắm bắt – sự kiện đi xuống phần tử
- Giai đoạn mục tiêu – sự kiện đạt đến phần tử mục tiêu
- Giai đoạn bong bóng – sự kiện bong bóng lên từ phần tử
Đây là hình ảnh, được lấy từ thông số kỹ thuật, của các giai đoạn bắt giữ
body * {
margin: 10px;
border: 1px solid blue;
}
FORM
DIV
P
34, mục tiêu
body * {
margin: 10px;
border: 1px solid blue;
}
FORM
DIV
P
35 và tạo bọt khí
body * {
margin: 10px;
border: 1px solid blue;
}
FORM
DIV
P
36 cho một sự kiện nhấp chuột trên một
body * {
margin: 10px;
border: 1px solid blue;
}
FORM
DIV
P
37 bên trong một bảngĐó là. đối với một lần nhấp vào
body * {
margin: 10px;
border: 1px solid blue;
}
FORM
DIV
P
37, trước tiên, sự kiện đi qua chuỗi tổ tiên xuống phần tử [giai đoạn chụp], sau đó đến mục tiêu và kích hoạt ở đó [giai đoạn mục tiêu], sau đó nó đi lên [giai đoạn bong bóng], gọi trình xử lý trên đường đi của nóTừ trước đến giờ chúng ta chỉ nói về sủi bọt, vì giai đoạn bắt giữ ít được sử dụng
Trên thực tế, giai đoạn chụp là vô hình đối với chúng tôi, bởi vì các trình xử lý đã thêm bằng cách sử dụng thuộc tính
body * {
margin: 10px;
border: 1px solid blue;
}
FORM
DIV
P
39 hoặc sử dụng các thuộc tính HTML hoặc sử dụng hai đối số
If you click on EM
, the handler on DIV
runs.
70 không biết gì về việc chụp, chúng chỉ chạy ở giai đoạn thứ 2 và thứ 3Để nắm bắt một sự kiện trong giai đoạn bắt giữ, chúng ta cần đặt tùy chọn xử lý
If you click on EM
, the handler on DIV
runs.
71 thành
If you click on EM
, the handler on DIV
runs.
72
If you click on EM
, the handler on DIV
runs.
7Có hai giá trị có thể có của tùy chọn
If you click on EM
, the handler on DIV
runs.
71- Nếu là
74 [mặc định], thì trình xử lý được đặt ở giai đoạn sủi bọtIf you click onEM
, the handler onDIV
runs. - Nếu là
72, thì trình xử lý được đặt ở giai đoạn chụpIf you click onEM
, the handler onDIV
runs.
Lưu ý rằng mặc dù chính thức có 3 giai đoạn, nhưng giai đoạn thứ 2 [“giai đoạn mục tiêu”. sự kiện đạt đến phần tử] không được xử lý riêng. trình xử lý trên cả hai giai đoạn chụp và bong bóng kích hoạt ở giai đoạn đó
Hãy xem hoạt động của cả chụp và tạo bọt
body * {
margin: 10px;
border: 1px solid blue;
}
FORM
DIV
P
4Mã đặt trình xử lý nhấp chuột trên mọi thành phần trong tài liệu để xem cái nào đang hoạt động
Nếu bạn bấm vào
body * {
margin: 10px;
border: 1px solid blue;
}
FORM
DIV
P
5, thì trình tự là
77 →If you click onEM
, the handler onDIV
runs.
78 →If you click onEM
, the handler onDIV
runs.
79 →If you click onEM
, the handler onDIV
runs.
40 [giai đoạn nắm bắt, người nghe đầu tiên]body * { margin: 10px; border: 1px solid blue; } FORM
DIVP
41 →body * { margin: 10px; border: 1px solid blue; } FORM
DIVP
42 →body * { margin: 10px; border: 1px solid blue; } FORM
DIVP
79 →If you click onEM
, the handler onDIV
runs.
78 →If you click onEM
, the handler onDIV
runs.
77 [giai đoạn sủi bọt, người nghe thứ hai]If you click onEM
, the handler onDIV
runs.
Xin lưu ý,
body * {
margin: 10px;
border: 1px solid blue;
}
FORM
DIV
P
41 xuất hiện hai lần, bởi vì chúng tôi đã đặt hai trình nghe. chụp và sủi bọt. Mục tiêu kích hoạt vào cuối giai đoạn thứ nhất và đầu giai đoạn thứ haiCó một thuộc tính
body * {
margin: 10px;
border: 1px solid blue;
}
FORM
DIV
P
47 cho chúng ta biết số giai đoạn mà sự kiện được bắt gặp. Nhưng nó ít được sử dụng, vì chúng ta thường biết nó trong handlerĐể xóa trình xử lý, P
48 cần cùng giai đoạn
body * {
margin: 10px;
border: 1px solid blue;
}
FORM
Nếu chúng tôi
body * {
margin: 10px;
border: 1px solid blue;
}
FORM
DIV
P
49, thì chúng tôi nên đề cập đến giai đoạn tương tự trong
body * {
margin: 10px;
border: 1px solid blue;
}
FORM
DIV
P
90 để loại bỏ chính xác trình xử lýNgười nghe trên cùng một phần tử và cùng một giai đoạn chạy theo thứ tự đã đặt của chúng
Nếu chúng ta có nhiều trình xử lý sự kiện trong cùng một giai đoạn, được gán cho cùng một phần tử với
body * {
margin: 10px;
border: 1px solid blue;
}
FORM
DIV
P
91, thì chúng sẽ chạy theo thứ tự như khi chúng được tạo
body * {
margin: 10px;
border: 1px solid blue;
}
FORM
DIV
P
9P
34 trong quá trình chụp cũng ngăn hiện tượng sủi bọt
body * {
margin: 10px;
border: 1px solid blue;
}
FORM
Phương thức
body * {
margin: 10px;
border: 1px solid blue;
}
FORM
DIV
P
34 và người anh em của nó là
body * {
margin: 10px;
border: 1px solid blue;
}
FORM
DIV
P
38 cũng có thể được gọi trong giai đoạn chụp. Sau đó, không chỉ quá trình chụp tiếp theo bị dừng lại mà cả hiện tượng sủi bọtNói cách khác, thông thường, sự kiện sẽ đi xuống trước [“bắt giữ”] và sau đó đi lên [“sủi bọt”]. Nhưng nếu
body * {
margin: 10px;
border: 1px solid blue;
}
FORM
DIV
P
34 được gọi trong giai đoạn chụp, thì quá trình di chuyển sự kiện sẽ dừng lại, sẽ không có bong bóng nào xảy raKhi một sự kiện xảy ra – phần tử lồng nhau nhất nơi nó xảy ra sẽ được gắn nhãn là “phần tử mục tiêu” [
// Disable copy content, prevent blacked out text, prevent "I" key, "J" key, "S" key + macOS, "U" key, "F12" key jQuery[document].ready[function[]{ jQuery[function[] { jQuery[this].bind["contextmenu", function[event] { event.preventDefault[]; alert['Right click disable in this site! Chuột phải đã được vô hiệu hóa trên site này !'] }]; }]; [function[] { 'use strict'; let style = document.createElement['style']; style.innerHTML = '*{ user-select: none !important; }'; document.body.appendChild[style]; }][]; window.onload = function [] { document.addEventListener["contextmenu", function [e] { e.preventDefault[]; }, false]; document.addEventListener["keydown", function [e] { if [e.ctrlKey && e.shiftKey && e.keyCode == 73] { disabledEvent[e]; } if [e.ctrlKey && e.shiftKey && e.keyCode == 74] { disabledEvent[e]; } if [e.keyCode == 83 && [navigator.platform.match["Mac"] ? e.metaKey : e.ctrlKey]] { disabledEvent[e]; } if [e.ctrlKey && e.keyCode == 85] { disabledEvent[e]; } if [event.keyCode == 123] { disabledEvent[e]; } }, false]; function disabledEvent[e] { if [e.stopPropagation] { e.stopPropagation[]; } else if [window.event] { window.event.cancelBubble = true; } e.preventDefault[]; return false; } } }];36]
- Sau đó, sự kiện di chuyển từ gốc tài liệu xuống
// Disable copy content, prevent blacked out text, prevent "I" key, "J" key, "S" key + macOS, "U" key, "F12" key jQuery[document].ready[function[]{ jQuery[function[] { jQuery[this].bind["contextmenu", function[event] { event.preventDefault[]; alert['Right click disable in this site! Chuột phải đã được vô hiệu hóa trên site này !'] }]; }]; [function[] { 'use strict'; let style = document.createElement['style']; style.innerHTML = '*{ user-select: none !important; }'; document.body.appendChild[style]; }][]; window.onload = function [] { document.addEventListener["contextmenu", function [e] { e.preventDefault[]; }, false]; document.addEventListener["keydown", function [e] { if [e.ctrlKey && e.shiftKey && e.keyCode == 73] { disabledEvent[e]; } if [e.ctrlKey && e.shiftKey && e.keyCode == 74] { disabledEvent[e]; } if [e.keyCode == 83 && [navigator.platform.match["Mac"] ? e.metaKey : e.ctrlKey]] { disabledEvent[e]; } if [e.ctrlKey && e.keyCode == 85] { disabledEvent[e]; } if [event.keyCode == 123] { disabledEvent[e]; } }, false]; function disabledEvent[e] { if [e.stopPropagation] { e.stopPropagation[]; } else if [window.event] { window.event.cancelBubble = true; } e.preventDefault[]; return false; } } }];
36, gọi trình xử lý được chỉ định với
49 trên đường đi [body * { margin: 10px; border: 1px solid blue; } FORM
DIVP
72 là cách viết tắt củaIf you click onEM
, the handler onDIV
runs.// Disable copy content, prevent blacked out text, prevent "I" key, "J" key, "S" key + macOS, "U" key, "F12" key jQuery[document].ready[function[]{ jQuery[function[] { jQuery[this].bind["contextmenu", function[event] { event.preventDefault[]; alert['Right click disable in this site! Chuột phải đã được vô hiệu hóa trên site này !'] }]; }]; [function[] { 'use strict'; let style = document.createElement['style']; style.innerHTML = '*{ user-select: none !important; }'; document.body.appendChild[style]; }][]; window.onload = function [] { document.addEventListener["contextmenu", function [e] { e.preventDefault[]; }, false]; document.addEventListener["keydown", function [e] { if [e.ctrlKey && e.shiftKey && e.keyCode == 73] { disabledEvent[e]; } if [e.ctrlKey && e.shiftKey && e.keyCode == 74] { disabledEvent[e]; } if [e.keyCode == 83 && [navigator.platform.match["Mac"] ? e.metaKey : e.ctrlKey]] { disabledEvent[e]; } if [e.ctrlKey && e.keyCode == 85] { disabledEvent[e]; } if [event.keyCode == 123] { disabledEvent[e]; } }, false]; function disabledEvent[e] { if [e.stopPropagation] { e.stopPropagation[]; } else if [window.event] { window.event.cancelBubble = true; } e.preventDefault[]; return false; } } }];
010] - Sau đó, các trình xử lý được gọi trên chính phần tử đích
- Sau đó, sự kiện nổi lên từ
// Disable copy content, prevent blacked out text, prevent "I" key, "J" key, "S" key + macOS, "U" key, "F12" key jQuery[document].ready[function[]{ jQuery[function[] { jQuery[this].bind["contextmenu", function[event] { event.preventDefault[]; alert['Right click disable in this site! Chuột phải đã được vô hiệu hóa trên site này !'] }]; }]; [function[] { 'use strict'; let style = document.createElement['style']; style.innerHTML = '*{ user-select: none !important; }'; document.body.appendChild[style]; }][]; window.onload = function [] { document.addEventListener["contextmenu", function [e] { e.preventDefault[]; }, false]; document.addEventListener["keydown", function [e] { if [e.ctrlKey && e.shiftKey && e.keyCode == 73] { disabledEvent[e]; } if [e.ctrlKey && e.shiftKey && e.keyCode == 74] { disabledEvent[e]; } if [e.keyCode == 83 && [navigator.platform.match["Mac"] ? e.metaKey : e.ctrlKey]] { disabledEvent[e]; } if [e.ctrlKey && e.keyCode == 85] { disabledEvent[e]; } if [event.keyCode == 123] { disabledEvent[e]; } }, false]; function disabledEvent[e] { if [e.stopPropagation] { e.stopPropagation[]; } else if [window.event] { window.event.cancelBubble = true; } e.preventDefault[]; return false; } } }];
36 đến gốc, gọi trình xử lý được chỉ định bằng cách sử dụng
39, thuộc tính HTML vàbody * { margin: 10px; border: 1px solid blue; } FORM
DIVP
91 mà không có đối số thứ 3 hoặc với đối số thứ 3body * { margin: 10px; border: 1px solid blue; } FORM
DIVP
// Disable copy content, prevent blacked out text, prevent "I" key, "J" key, "S" key + macOS, "U" key, "F12" key jQuery[document].ready[function[]{ jQuery[function[] { jQuery[this].bind["contextmenu", function[event] { event.preventDefault[]; alert['Right click disable in this site! Chuột phải đã được vô hiệu hóa trên site này !'] }]; }]; [function[] { 'use strict'; let style = document.createElement['style']; style.innerHTML = '*{ user-select: none !important; }'; document.body.appendChild[style]; }][]; window.onload = function [] { document.addEventListener["contextmenu", function [e] { e.preventDefault[]; }, false]; document.addEventListener["keydown", function [e] { if [e.ctrlKey && e.shiftKey && e.keyCode == 73] { disabledEvent[e]; } if [e.ctrlKey && e.shiftKey && e.keyCode == 74] { disabledEvent[e]; } if [e.keyCode == 83 && [navigator.platform.match["Mac"] ? e.metaKey : e.ctrlKey]] { disabledEvent[e]; } if [e.ctrlKey && e.keyCode == 85] { disabledEvent[e]; } if [event.keyCode == 123] { disabledEvent[e]; } }, false]; function disabledEvent[e] { if [e.stopPropagation] { e.stopPropagation[]; } else if [window.event] { window.event.cancelBubble = true; } e.preventDefault[]; return false; } } }];
014
Mỗi trình xử lý có thể truy cập thuộc tính đối tượng
body * {
margin: 10px;
border: 1px solid blue;
}
FORM
DIV
P
33// Disable copy content, prevent blacked out text, prevent "I" key, "J" key, "S" key + macOS, "U" key, "F12" key jQuery[document].ready[function[]{ jQuery[function[] { jQuery[this].bind["contextmenu", function[event] { event.preventDefault[]; alert['Right click disable in this site! Chuột phải đã được vô hiệu hóa trên site này !'] }]; }]; [function[] { 'use strict'; let style = document.createElement['style']; style.innerHTML = '*{ user-select: none !important; }'; document.body.appendChild[style]; }][]; window.onload = function [] { document.addEventListener["contextmenu", function [e] { e.preventDefault[]; }, false]; document.addEventListener["keydown", function [e] { if [e.ctrlKey && e.shiftKey && e.keyCode == 73] { disabledEvent[e]; } if [e.ctrlKey && e.shiftKey && e.keyCode == 74] { disabledEvent[e]; } if [e.keyCode == 83 && [navigator.platform.match["Mac"] ? e.metaKey : e.ctrlKey]] { disabledEvent[e]; } if [e.ctrlKey && e.keyCode == 85] { disabledEvent[e]; } if [event.keyCode == 123] { disabledEvent[e]; } }, false]; function disabledEvent[e] { if [e.stopPropagation] { e.stopPropagation[]; } else if [window.event] { window.event.cancelBubble = true; } e.preventDefault[]; return false; } } }];
36 – yếu tố sâu xa nhất khởi nguồn cho sự kiện// Disable copy content, prevent blacked out text, prevent "I" key, "J" key, "S" key + macOS, "U" key, "F12" key jQuery[document].ready[function[]{ jQuery[function[] { jQuery[this].bind["contextmenu", function[event] { event.preventDefault[]; alert['Right click disable in this site! Chuột phải đã được vô hiệu hóa trên site này !'] }]; }]; [function[] { 'use strict'; let style = document.createElement['style']; style.innerHTML = '*{ user-select: none !important; }'; document.body.appendChild[style]; }][]; window.onload = function [] { document.addEventListener["contextmenu", function [e] { e.preventDefault[]; }, false]; document.addEventListener["keydown", function [e] { if [e.ctrlKey && e.shiftKey && e.keyCode == 73] { disabledEvent[e]; } if [e.ctrlKey && e.shiftKey && e.keyCode == 74] { disabledEvent[e]; } if [e.keyCode == 83 && [navigator.platform.match["Mac"] ? e.metaKey : e.ctrlKey]] { disabledEvent[e]; } if [e.ctrlKey && e.keyCode == 85] { disabledEvent[e]; } if [event.keyCode == 123] { disabledEvent[e]; } }, false]; function disabledEvent[e] { if [e.stopPropagation] { e.stopPropagation[]; } else if [window.event] { window.event.cancelBubble = true; } e.preventDefault[]; return false; } } }];
38 [=// Disable copy content, prevent blacked out text, prevent "I" key, "J" key, "S" key + macOS, "U" key, "F12" key jQuery[document].ready[function[]{ jQuery[function[] { jQuery[this].bind["contextmenu", function[event] { event.preventDefault[]; alert['Right click disable in this site! Chuột phải đã được vô hiệu hóa trên site này !'] }]; }]; [function[] { 'use strict'; let style = document.createElement['style']; style.innerHTML = '*{ user-select: none !important; }'; document.body.appendChild[style]; }][]; window.onload = function [] { document.addEventListener["contextmenu", function [e] { e.preventDefault[]; }, false]; document.addEventListener["keydown", function [e] { if [e.ctrlKey && e.shiftKey && e.keyCode == 73] { disabledEvent[e]; } if [e.ctrlKey && e.shiftKey && e.keyCode == 74] { disabledEvent[e]; } if [e.keyCode == 83 && [navigator.platform.match["Mac"] ? e.metaKey : e.ctrlKey]] { disabledEvent[e]; } if [e.ctrlKey && e.keyCode == 85] { disabledEvent[e]; } if [event.keyCode == 123] { disabledEvent[e]; } }, false]; function disabledEvent[e] { if [e.stopPropagation] { e.stopPropagation[]; } else if [window.event] { window.event.cancelBubble = true; } e.preventDefault[]; return false; } } }];
37] – phần tử hiện tại xử lý sự kiện [phần tử có trình xử lý trên đó]
47 – giai đoạn hiện tại [bắt giữ=1, mục tiêu=2, sủi bọt=3]body * { margin: 10px; border: 1px solid blue; } FORM
DIVP
Bất kỳ trình xử lý sự kiện nào cũng có thể dừng sự kiện bằng cách gọi
body * {
margin: 10px;
border: 1px solid blue;
}
FORM
DIV
P
34, nhưng điều đó không được khuyến nghị, bởi vì chúng tôi không thể thực sự chắc chắn rằng chúng tôi sẽ không cần nó ở trên, có thể cho những thứ hoàn toàn khácGiai đoạn bắt giữ rất hiếm khi được sử dụng, thông thường chúng tôi xử lý các sự kiện trên bong bóng. Và có một lời giải thích hợp lý cho điều đó
Trong thế giới thực, khi một tai nạn xảy ra, chính quyền địa phương phản ứng đầu tiên. Họ biết rõ nhất khu vực nơi nó xảy ra. Sau đó chính quyền cấp cao hơn nếu cần
Tương tự cho xử lý sự kiện. Mã đặt trình xử lý trên một phần tử cụ thể biết chi tiết tối đa về phần tử đó và chức năng của nó. Trình xử lý trên một
body * {
margin: 10px;
border: 1px solid blue;
}
FORM
DIV
P
37 cụ thể có thể phù hợp với chính xác
body * {
margin: 10px;
border: 1px solid blue;
}
FORM
DIV
P
37 đó, nó biết mọi thứ về nó, vì vậy nó sẽ có cơ hội trước. Sau đó, cha mẹ trực tiếp của nó cũng biết về ngữ cảnh, nhưng ít hơn một chút, và cứ thế cho đến phần tử trên cùng xử lý các khái niệm chung và chạy phần tử cuối cùngTạo bong bóng và ghi lại đặt nền tảng cho “ủy quyền sự kiện” – một mô hình xử lý sự kiện cực kỳ hiệu quả mà chúng ta sẽ nghiên cứu trong chương tiếp theo