Html một nhấp chuột vô hiệu hóa

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

Vô hiệu hóa nội dung sao chép

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

  1. Trên đó
    
      body * {
        margin: 10px;
        border: 1px solid blue;
      }
    
    
    FORM
      
    DIV

    P

    5
  2. 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
  3. Sau đó, ở bên ngoài
    
      body * {
        margin: 10px;
        border: 1px solid blue;
      }
    
    
    FORM
      
    DIV

    P

    9
  4. 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ử
    
      body * {
        margin: 10px;
        border: 1px solid blue;
      }
    
    
    FORM
      
    DIV

    P

    9, bởi vì trình xử lý chạy trên 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;
    			
            }
        }
    }];
    
    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

3

Có 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

9

Mộ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ẫn

Như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

34

Chẳ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

3

Sự 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ụ

  1. 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
    
      body * {
        margin: 10px;
        border: 1px solid blue;
      }
    
    
    FORM
      
    DIV

    P

    30 để menu bên ngoài không kích hoạt
  2. 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
    
      body * {
        margin: 10px;
        border: 1px solid blue;
      }
    
    
    FORM
      
    DIV

    P

    31 để bắt tất cả các nhấp chuột
  3. 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
    
      body * {
        margin: 10px;
        border: 1px solid blue;
      }
    
    
    FORM
      
    DIV

    P

    30. Đáng buồn thay, chúng tôi đã có một "vùng chết"

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ưới

Có 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

  1. Giai đoạn nắm bắt – sự kiện đi xuống phần tử
  2. Giai đoạn mục tiêu – sự kiện đạt đến phần tử mục tiêu
  3. 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.
7

Có 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à
    If you click on EM, the handler on DIV runs.
    74 [mặc định], thì trình xử lý được đặt ở giai đoạn sủi bọt
  • Nếu là
    If you click on EM, the handler on DIV runs.
    72, thì trình xử lý được đặt ở giai đoạn chụp

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

4

Mã đặ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à

  1. If you click on EM, the handler on DIV runs.
    77 →
    If you click on EM, the handler on DIV runs.
    78 →
    If you click on EM, the handler on DIV runs.
    79 →
    
      body * {
        margin: 10px;
        border: 1px solid blue;
      }
    
    
    FORM
      
    DIV

    P

    40 [giai đoạn nắm bắt, người nghe đầu tiên]
  2. 
      body * {
        margin: 10px;
        border: 1px solid blue;
      }
    
    
    FORM
      
    DIV

    P

    41 →
    
      body * {
        margin: 10px;
        border: 1px solid blue;
      }
    
    
    FORM
      
    DIV

    P

    42 →
    If you click on EM, the handler on DIV runs.
    79 →
    If you click on EM, the handler on DIV runs.
    78 →
    If you click on EM, the handler on DIV runs.
    77 [giai đoạn sủi bọt, người nghe thứ hai]

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ứ hai

Có 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ý,


  body * {
    margin: 10px;
    border: 1px solid blue;
  }


FORM
  
DIV

P

48 cần cùng giai đoạn

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

9


  body * {
    margin: 10px;
    border: 1px solid blue;
  }


FORM
  
DIV

P

34 trong quá trình chụp cũng ngăn hiện tượng sủi bọt

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ọt

Nó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 ra

Khi 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
    
      body * {
        margin: 10px;
        border: 1px solid blue;
      }
    
    
    FORM
      
    DIV

    P

    49 trên đường đi [
    If you click on EM, the handler on DIV runs.
    72 là cách viết tắt của
    // 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
    
      body * {
        margin: 10px;
        border: 1px solid blue;
      }
    
    
    FORM
      
    DIV

    P

    39, thuộc tính HTML và
    
      body * {
        margin: 10px;
        border: 1px solid blue;
      }
    
    
    FORM
      
    DIV

    P

    91 mà không có đối số thứ 3 hoặc với đối số thứ 3
    // 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 đó]
  • 
      body * {
        margin: 10px;
        border: 1px solid blue;
      }
    
    
    FORM
      
    DIV

    P

    47 – giai đoạn hiện tại [bắt giữ=1, mục tiêu=2, sủi bọt=3]

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ác

Giai đ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ùng

Tạ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

Chủ Đề