删除儿童事件处理程序，但不是与jQuery自我

我有一个div有一个孩子跨度，而又有一个孩子跨度。我用钩mouseDown事件这样父DIV：删除儿童事件处理程序，但不是与jQuery自我

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

但是，这也勾住孩子的事件。我怎样才能解除绑定孩子或绑定div？

我试过，但它似乎不工作：

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

这不起作用：

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

UPDATE

通过Serlite提出的解决方案工程停止跨越的事件。现在唯一的问题是，如果动作发生在跨度上（即使鼠标在DIV内），也没有事件触发。考虑到跨度事件已关闭，但是有没有办法确保DIV的事件被激发，而不管跨SPAN中的im是否被激发？

来源

2015-08-14 rex

如果你想让你的细胞的孩子不触发他们父母的回调函数（即如果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向你展示修改后的行为。让我知道这是否符合您的要求。

来源

2015-08-14 21:22:35 Serlite

感谢这工作 – rex

太棒了，很高兴我能帮忙。 – Serlite

但现在唯一的问题是，如果我点击单元格中的跨度是事件不会触发，即使通过鼠标在div内。是否有可能解决这个问题？ – rex

删除儿童事件处理程序，但不是与jQuery自我

回答

相关问题