Question

<ul>
  <li ng-click="setSelectedItem(member.id)">test
    <ul>
      <li ng-click="setSelectedItem(member.id)">test 2
        <ul>
          <li ng-click="setSelectedItem(member.id)">inner test2
          </li>
        </ul>
      </li>
    </ul>  
  </li>
</ul>

上面的树结构是由两个指令通过使用this堆栈溢出问题生成的。

点击测试时， setSelectedItem（）会被调用一次。单击 test2 时， setSelectedItem（）将被调用两次。点击内部test2 时， setSelectedItem（）会被调用三次。

任何人都可以帮我解决这个问题。我希望在单击内部li标签时只调用一次点击。感谢

Answer 1

要停止事件传播，请使用以下代码。

  <li ng-click="setSelectedItem(member.id); $event.stopPropagation();">test</li>

Answer 2

使用$event.stopPropagation();。防止点击事件发生在父母身上。

<ul>
  <li ng-click="setSelectedItem(member.id);$event.stopPropagation();">test
    <ul>
      <li ng-click="setSelectedItem(member.id);$event.stopPropagation();">test 2
        <ul>
          <li ng-click="setSelectedItem(member.id);$event.stopPropagation();">inner test2
          </li>
        </ul>
      </li>
    </ul>  
  </li>
</ul>

在ul li中多次点击触发

2 个答案: