Question

让我们假设有以下代码：

<body style="overflow: hidden">
    <div class="wall">
        <button>New</button>
        <div class="prova">
            <a href="localhost">ciao !</a>
        </div>
       <div class="prova">
            <a href="localhost">miao !</a>
        </div>
    </div>
</body>

和以下js / jquery代码：

function onBoot()
{
    $(".prova").draggable();

    $(".wall").mousedown(onMouseDown);
    $(".wall").mouseup(onMouseUp);
}


function onMouseDown(e)
{
    console.log("down");
}

function onMouseUp(e)
{
    console.log("up");
}


$(onBoot);

现在，我正确地看到了按钮和两个div。当我点击“墙”（父div）时，我在控制台上看到“向下”/“向上”，正如我所料。但是，当我点击“prova”divs和按钮时，我也会在控制台上看到“向下”/“向上”。我知道“冒泡”概念，其中一个事件从子元素转发到父元素，我想阻止它，但没有在“prova”div上指定显式事件处理程序。有可能吗？

Answer 1

您可以检查发起人className，如下所示：

function onMouseDown(e)
{
  e = e || event;
  if ((e.srcElement || e.target).className === 'wall') {console.log("down");}
  return true;
}

请参阅this jsfiddle

Answer 2

在您的事件处理程序（OnMouseDown，OnMouseUp）中，检查e.currentTarget是否等于e.target。见jQuery Events documentation：

将event.target与此进行比较通常很有用，以确定是否由于事件冒泡而处理了事件。当事件冒泡时，此属性在事件委派中非常有用。

所以，例如：

function onMouseDown(e)
{
    if(e.currentTarget !== e.target)
        return;

    console.log("down");
}

停止从子元素到父元素的事件转发

2 个答案: