如何给这样的矛盾动作设置优先执行

Question

页面结构如下。
鼠标在 LI 元素 横向滑过 执行  横向滑动
鼠标在 ItemPage 元素上纵向滑动 ，执行纵向滑动
现在 有个问题，就是 在 LI 上的滑动 会触发 ItemPage 上的 纵向滑动。
我想做成 始终只执行 一个动作 ，要么是执行 横滚 要么执行 纵滚。
<div id='ItemPage'>
  <div class='Item'>
        <ul>
           <li>111</li><li>111</li><li>111</li><li>111</li><li>111</li>
       </ul>
  </div>  <div class='Item'>
        <ul>
           <li>111</li><li>111</li><li>111</li><li>111</li><li>111</li>
       </ul>
  </div>  <div class='Item'>
        <ul>
           <li>111</li><li>111</li><li>111</li><li>111</li><li>111</li>
       </ul>
  </div></div>

Answer 1

关于JS冒泡的问题