使用jQuery删除子事件处理程序，但不删除self

Remove event handlers of children but not self with jQuery

本文关键字：删除 self 事件处理 jQuery 使用 程序      更新时间：2023-09-26

我有一个div，它有一个子span，而这个子span又有另一个子span。我用mouseDown事件钩住父div，像这样:

$("." + cellClass).mousedown(mouseDownEvent);

但是这也将子事件与事件挂钩。如何解除子元素的绑定，或者只绑定div?

我试过这个，但它似乎不工作:

$("." + cellClass).children().unbind();

这行不通:

function mouseDownEvent(event){
    event.stopPropagation();
    isMouseDown = !isMouseDown;
    var cell = event.target;
    selectedCells = []; // reset
    selectedCells = addCellToSelection(cell, selectedCells)
}

Serlite提出的解决方案是停止跨度的事件。现在唯一的问题是，如果动作发生在span上(即使鼠标在DIV内)，则不会触发事件。考虑到SPAN事件是关闭的，这是有意义的，但有没有一种方法来确保DIV的事件被触发，而不管我是否在SPAN上?

如果你想让你的子单元格不触发父单元格的回调函数(即:如果mousedown发生在子节点上，则不要执行mouseDownEvent())，您需要停止从子节点级别开始的事件传播。

这可以通过将另一个回调函数绑定到父函数的子函数，并从那里调用stopPropagation()来完成。使用当前的命名，这段代码可以变成:

$("." + cellClass).mousedown(mouseDownEvent);
$("." + cellClass).children().mousedown(mouseDownEventChild);

其中mouseDownEventChild()为:

function mouseDownEventChild(e){
    e.stopPropagation();
}
下面是要演示的JSFiddle。希望这对你有帮助!如果你有任何问题，请告诉我。 编辑:

作为对问题更新的回应，我的第一个想法是检查子元素的click事件是否在父元素的边界内触发。(也许有一个更优雅的解决方案，但这是我能想到的最直接的解决方案。)这会将mouseDownEventChild()更改为:

function mouseDownEventChild(e){
    e.stopPropagation();
    var $parentEl = $(this).parent();
    // Traveling up DOM until we find an appropriate parent
    while (!$parentEl.hasClass(cellClass)){
        $parentEl = $parentEl.parent();
    }
    // Checking mouse event is within bounding box
    var parentBounds = $parentEl[0].getBoundingClientRect();    
    if (e.clientX >= parentBounds.left && e.clientX < (parentBounds.left + parentBounds.width) && e.clientY >= parentBounds.top && e.clientY < (parentBounds.top + parentBounds.height)){
        mouseDownEvent(e);
    }
}

下面是更新后的JSFiddle，用于显示修改后的行为。让我知道这是否符合您的要求。

相关文章：