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

Question

我有一个具有子跨度的 div，而该子跨度又具有另一个子跨度。 我将父 div 与 mouseDown 事件挂钩，如下所示：

$("." + 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 的事件都会被触发？

Answer 1

如果您希望您的单元格的子级不触发其父级的回调函数（即，如果mousedown 发生在子级上，请不要执行mouseDownEvent()），您需要停止传播从子级别开始的事件。

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

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

mouseDownEventChild() 就是这样：

function mouseDownEventChild(e){
    e.stopPropagation();
}

这里有一个JSFiddle 来演示。希望这可以帮助！如果您有任何问题，请告诉我。

编辑：

针对问题的更新，我的第一个想法是检查孩子的点击事件是否在父母的范围内被触发。 （可能有更优雅的解决方案，但这是我能想到的最直接的解决方案。）这会将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);
    }
}

这是一个updated JSFiddle，向您展示修改后的行为。让我知道这是否符合您的要求。