jquery 在Safari中的iPad/iPhone上停止传播

n53p2ov0 于 2023-06-29 发布在 jQuery

关注(0)|答案(2)|浏览(124)

我有一个现有的悬停菜单，在我测试过的所有浏览器和设备上都能很好地工作。在这个菜单内，我添加了一个登录和密码输入框，现在当使用Safari触摸iPad/iPhone上的密码字段时，它会触发菜单关闭。这种行为也发生在IE（桌面）中。
为了在IE中解决这个问题，我使用了以下代码：

<script type="text/javascript">
$(document).ready(function(){
  $(".subnav-container select").mouseleave(function(event){
    event.stopPropagation();
  });
});
</script>

添加此修复程序后，问题仍然存在于iPad/iPhone上的Safari中。不过，它在iPad/iPhone上的Chrome中运行正常。
我已经尝试了这个修复移动的Safari，但它不工作：

<script type="text/javascript">
document.addEventListener('touchstart', function ( e )  {
    e.preventDefault();
    var touch = e.touches[0];
    alert(touch.pageX + " - " + touch.pageY);
}, false);
</script>

我尝试过Touchenter，TouchLeave，TouchStart，但没有如何应用触摸屏设备问题修复的经验。
我的基本html如下：

<div data-async-loaded="loaded" data-gadget="menu.gadget.MyMenuNav" data-load="preloaded">
  <nav class="menu">
    <div class="tier0">       
      <div class="shop facet nav-section" data-subnav="tab1" data-nav-tracking="tab1">
        <a href="javascript:void(0)">
          <span class="font-family--platform button-font-size--small facet-label">
            LOGIN
            <span class="arrow-down text--medium-light-grey">
            </span>
          </span>
        </a>
      </div>
    </div>

    <div class="tier1">   
       <div data-subnav="tab1" class="subnav tracking is-hidden" data-nav-tracking="tab1">
        <div class="subnav-container">
          <div class="subnav-section">
            <div class="subnav-item l-w6 visual-format">
              <form name="login" action="http://football21.myfantasyleague.com/2013/login" method="post">
              <input type="hidden" name="LEAGUE_ID" value="24779"  /> 
              <table align="center" cellspacing="1" class="homepagemodule report" id="welcome"><caption><span>Welcome</span></caption><tbody><tr><th colspan="2">Guest</th></tr>
              <tr class="oddtablerow"><td class="inputlabel">Login As:</td>
              <td><select size="1" name="FRANCHISE_ID">
              <option value="0000">Commissioner</option>
              <option value="0001">UR4BIDN</option>
              <option value="0002">NIKE TEAM B</option>
              <option value="0003">NIKE TEAM C</option>
              <option value="0004">Franchise 4</option>
              <option value="0005">Franchise 5</option>
              <option value="0006">Franchise 6</option>
              <option value="0007">Franchise 7</option>
              <option value="0008">Franchise 8</option>
              <option value="0009">Franchise 9</option>
              <option value="0010">Franchise 10</option>
              <option value="0011">TRADEA</option>
              <option value="0012">TRADEB</option>
              </select></td></tr>
              <tr class="eventablerow"><td class="inputlabel">Password:</td><td><input name="PASSWORD" type="password" size="10"  /> </td></tr>
              <tr class="oddtablerow"><td align="center" colspan="2"><input type="submit" value="Login"  /> </td></tr>
              </tbody></table></form>
            </div>                
          </div>
        </div>
      </div>          
      </div>     
  </nav>
</div>

jquery

来源：https://stackoverflow.com/questions/21029660/stoppropagation-on-ipad-iphone-in-safari

2条答案

按热度按时间

shstlldc1#

script type="text/javascript">
document.addEventListener('touchend', function ( e )  {
    e.preventDefault();
e.stopPropagation();
    var touch = e.touches[0];
    alert(touch.pageX + " - " + touch.pageY);
});
</script>

赞(0）回复(0）举报 2023-06-29

wi3ka0sx2#

我找到了解决iPhone问题的方法！你需要直接在DOM中的元素上设置“Propagation”。JS的其余部分可以用通常的方式编写。示例：

<body>
   <a href="google.com"> Parent that should remain unaffected <br><br>
      
      <div onclick="function(e){e.preventDefault(); e.stopPropagation();};"> 
         Clicking here will not activate the "A" tag 
      </div>
   
   </a>
</body>

<script>
   $('div').click(function(){
      window.location.href = "samborsky.pro";
   });
</script>

赞(0）回复(0）举报 2023-06-29

我来回答

jquery 在Safari中的iPad/iPhone上停止传播

2条答案

相关问题

热门标签

最新问答