Question

例如我有这段代码：

<style>
    .wrapper { width:1200px; height:800px; }
    .column { width:900px; height:800px; margin:auto -0; }
</style>

<div class="wrapper">
     <div class="column"> </div>
</div>

我希望在单击“列”外部但不在列内部时调用mousedown函数。这可能吗？

我目前的非工作代码是：

$(".wrapper:not(.column)").mousedown(function(){
     alert("test");
});

更新：我实际上是在使用类，而不是ID。

Answer 1

您要做的是在#column div上放置一个mousedown事件处理程序，但是在该事件处理程序中，您希望阻止事件冒泡到其容器元素。

$("#column").mousedown(function (e) {
  var event = e || window.event;
  if (event.stopPropagation) {
    event.stopPropagation();
  } else {
    event.cancelBubble = true;
  } 
});

以下是一个完整的示例：http://jsfiddle.net/YrXSM/

Answer 2

我认为你不能停止从孩子那里调用这个函数，但你可以检测到被点击的内容。我不确定这是否是最佳方式，但这应该有效：

$("#wrapper").mousedown(function(e){
  if($(e.target).attr('id') == 'wrapper')
  {
    //do stuff
  }
});

Answer 3

$(".wrapper").mousedown(function(e) {
    if (this !== e.target) { return; }
    alert("test"); 
});

因此，基本上，我们正在测试是否直接点击.wrapper元素。如果没有，我们通过返回忽略该事件。

Answer 4

$("#wrapper").mousedown(function(){
     alert("test");
});

Answer 5

我接近这个的方法是将另一个事件分配给没有做任何事情的#container onMouseDown，然后阻止事件冒泡。

Answer 6

以下方法可以通过阻止带有类mousedown的元素的column事件进行冒泡，只要列元素严格包含在包装元素中，就可以正常工作。

$(".wrapper").mousedown(function(evt) {
    alert("Mouse down!");
});

$(".column").mousedown(function(evt) {
    evt.stopPropagation();
});

Answer 7

使用e.target给出的示例是最佳选项，但是在一般情况下有可能将.mousedown（）函数绑定到更复杂的选择器，如果是这种情况，您可以使用以下代码

$(".wrapper").mousedown(function(e){
    if ($('.wrapper').filter(e.target).size() > 0) {
         alert("test");
    }
});

演示于：http://jsfiddle.net/9RPcb/1/

是否可以在元素内部执行mousedown函数，但不是元素childen？

7 个答案: