是否可以在元素内执行 mousedown 功能，但不能在子元素内执行？答案

【问题标题】：Is it possible to do a mousedown function inside an element, but not the elements childen?是否可以在元素内执行 mousedown 功能，但不能在子元素内执行？
【发布时间】：2010-11-20 02:05:46
【问题描述】：

例如我有这个代码：

<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。

【问题讨论】：

你不需要 :not(#column) - #wrapper 就足够了，因为它是按 id 选择的。
在我的实际代码中，我使用的是类。这会影响什么吗？
仍然，您的选择器不会选择 .column div，因为它没有“包装器”类，因此您仍然不需要 :not(.column)。
使用类意味着你需要一个更通用的方法，看看我的回答看看如何。

标签： javascript jquery css-selectors

【解决方案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/

【讨论】：

我认为 jQuery e.stopPropagation() 应该适用于所有浏览器。
您正在使用 jQuery，因此不需要做那些 IE 兼容性的事情。事件对象被传入处理程序，e.stopPropagation() 在处理程序内部工作。

【解决方案2】：

我认为您无法阻止子项调用该函数，但您可以检测到点击了什么。我不确定这是否是 最好的 方法，但这应该可行：

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

【讨论】：

【解决方案3】：

下面的方法将通过阻止 column 类的元素上的 mousedown 事件冒泡来起作用，并且只要列元素严格包含在包装器元素中，它就会起作用。

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

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

【讨论】：

这成功了！有什么理由让其他例子更合适吗？
没有。这与 Brandon Montgomery 的答案相同，但已完全实施。

【解决方案4】：

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

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

【讨论】：

【解决方案5】：

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

【讨论】：

【解决方案6】：

我解决这个问题的方法是将另一个事件分配给#container onMouseDown，它什么都不做，然后防止事件冒泡。

【讨论】：

【解决方案7】：

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

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

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

【讨论】：