Question

我知道有很多方法可以检测元素外部的点击。大多数人都使用event.stopPropagation。由于event.stopPropagation会打破其他东西，我想知道是否有另一种方法可以达到同样的效果。我为此创建了一个简单的测试：

HTML：

<div class="click">Click me</div>

使用Javascript：

$(function() {
    var $click = $('.click'),
        $html = $('html');

    $click.on( 'click', function( e ) {
        $click.addClass('is-clicked').text('Click outside');

        // Wait for click outside
        $html.on( 'click', clickOutside );

        // Is there any other way except using .stopPropagation / return false
        event.stopPropagation();
    });

    function clickOutside( e ) {
        if ( $click.has( e.target ).length === 0 ) {
            $click.removeClass('is-clicked').text('Click me');

            // Remove event listener
            $html.off( 'click', clickOutside );
        }
    }
});

http://jsfiddle.net/8p4jhvqn/

这很有效，但只是因为我停止了event.stopPropagation();的冒泡。在这种情况下，如何摆脱event.stopPropagation();？

Answer 1

可以用更简单的方式完成，不是吗？当下面这么简单的事情发挥作用时，为什么会让事情复杂化。

$(document).click(function(e){
    var elm = $('.click');
    if(elm[0] == e.target){
       elm.addClass("is-clicked").text("click outside");
    } else { elm.removeClass("is-clicked").text("click inside"); }
});

DEMO

Answer 2

你可以做这样的事情来达到同样的效果

$(document).on("click", function(e){
        var target = $(e.target);
        if(target.hasClass("click")){
            $click.addClass('is-clicked').text('Click outside');
        }else{
            $click.removeClass('is-clicked').text('Click me');
        }
    });

Answer 3

HTML code：

<div id="box" style="width:100px; height:100px; border:1px solid #000000; background-color:#00ff00;"></div>

JavaScript代码：

function Init()
{
    $(document).click(function(event){
        if(event.target.id == "box")
        {
            $(event.target).css("backgroundColor", "#ff0000");
        }
        else
        {
            $("#box").css("backgroundColor", "#00ff00");
        }
    })
}

$(document).ready(Init);

Answer 4

如果相关元素包含子元素，那么这些元素可能会显示为e.target，您无法将其与元素进行比较。

在这种情况下，在事件和文档中捕获事件，并检测仅在文档上发生的事件，例如通过记录和比较e.target：

var lastTarget = undefined;

$("#interesting-div").click(function(e) {
  // remember target
  lastTarget = e.target;
});

$(document).click(function(e) {
  if (e.target != lastTarget) {
    // if target is different, then this event didn't come from our
    // interesting div.
    // do something interesting here:
    console.log("We got a click outside");

  }
});

＆＃13;

var lastTarget = undefined;

$("#interesting-div").click(function(e) {
  // remember target
  lastTarget = e.target;
});

$(document).click(function(e) {
  if (e.target != lastTarget) {
    // if target is different, then this event didn't come from our
    // interesting div.
    // do something interesting here:
    console.log("We got a click outside");

  }
});

＆＃13;

#interesting-div {
  background: #ff0;
  border: 1px solid black;
  padding: .5em;
}
#annoying-childelement {
  background: #fa0;
  border: 1px solid black;
  margin: 1em;
  padding: .5em;
  width: 20em;
}
#large-div {
  background: #ccc;
  padding: 2em 2em 20em 2em;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div id="large-div">
  <div id="interesting-div">
    This is our interesting element
    <div id="annoying-childelement">
      child element
    </div>
  </div>
</div>
</div>

＆＃13;

单击外部元素而不使用event.stopPropagation

4 个答案: