Question

我的li标签是否可以偶然地从ul＆＃39;继承事件处理程序。？有时＆＃34; item1＆＃34;坚持＆＃34; item2＆＃34;我得到2in1：

    <ul id="todo"  ondragover="allowDrop(event)" ondrop="drop(event)">
        <li id="item1" draggable="true"  ondragstart="drag(event)">Task 1</li>
        <li id="item2" draggable="true" ondragstart="drag(event)">Task 2</li>
    </ul>

    <ul id="inprogress" ondragover="allowDrop(event)" ondrop="drop(event)">
        <li></li>
        <li></li>
    </ul>


    <ul id="done" ondragover="allowDrop(event)" ondrop="drop(event)">
        <li></li>
        <li></li>
    </ul>

Answer 1

不是＆＃34;意外＆＃34;，它被称为event bubbling。想象一下，您有一堆堆叠的组件，<ul>包含在<div>中的<li>。如果您点击最内层元素（此示例中的<ul>），您还会点击<li>，因为它包含allowDrop()。所有事件都是如此。

您可以在<ul>功能中检查事件的target元素，看看它是<li>还是{ {1}}使用Element.tagName属性。

function allowDrop (event) {
  if (event.target.tagName === 'li') {
    return // the event was bubbled up
  }

  // your normal code goes here
}

免责声明：未经测试的代码，但应工作：）

<li>默认从<ul>继承事件处理程序吗？

1 个答案: