控制点击后文档点击火

Question

我在jquery中创建了一个常用的点击功能，每当点击文档的任何位置时都会触发。如果控件有click事件，则该事件首先触发，然后文档点击触发，但我想在控制点击事件之前触发文档点击事件。请建议如何解决此问题。

Answer 1

有两种选择：

1. 您可以使用事件的捕获阶段而不是冒泡阶段在现代浏览器上执行此操作。来自the DOM events specification的图表有助于理解事件的各个阶段：

   

   IE在标准模式下IE9不支持事件捕获（IE8及更早版本根本没有）。

   jQuery不提供使用事件捕获的API，因此您必须使用addEventListener代替：

   document.querySelector("selector for the control").addEventListener("click", function(e) {
       // Control code here
   }, true);
   document.addEventListener("click", function(e) {
       // Document code here
   }, true);
   

   最后的true表示您想要使用捕获阶段，而不是冒泡阶段。

2. 不要直接处理控件上的点击，使用事件委派，处理文档点击，如果点击来自控件，则从文档点击处理程序调用特定于控件的处理：

   $(document).on("click", handleDocumentClick);
   
   function handleDocumentClick(e) {
     // On the next line, use whatever selector matches your controls
     var input = $(e.target).closest("input")[0];
     display("document click received");
     if (input) {
       handleControlClick.call(input, e);
     }
   }
   
   function handleControlClick(e) {
     display("control click received");
   }
   

   Live Example

Answer 2

您可以使用live()。 live()将click事件绑定到DOM的document元素。当浏览器事件通过DOM树冒泡时，会触发任何匹配元素的click事件。

$(document).click(function() {
    alert('document');    
});
$(document).live('click', 'div', function() {
   alert('div'); 
});

DEMO