iOSでのクリックイベントの失効解決方法

4478 ワード
ios javascript
iOSでのクリックイベントの失効解決方法
問題の説明
一つの要素にclickイベントの追加を依頼した場合、イベントがdocumentまたはbodyに委託され、依頼された要素がデフォルトでクリックできない(div、spanなど)場合、clickイベントは無効になります.
デモ:



  
    
    <meta charset="UTF-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta name="robots" content="index,follow"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta name="format-detection" content="telphone=no, email=no"/>
    <meta name="renderer" content="webkit"/>
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <meta name="HandheldFriendly" content="true"/>
    <meta name="MobileOptimized" content="320"/>
    <meta name="screen-orientation" content="portrait"/>
    <meta name="x5-orientation" content="portrait"/>
    <meta name="full-screen" content="yes"/>
    <meta name="x5-fullscreen" content="true"/>
    <meta name="browsermode" content="application"/>
    <meta name="x5-page-mode" content="app"/>
    <meta name="msapplication-tap-highlight" content="no"/>
    <meta http-equiv="Expires" content="0"/>
    <meta http-equiv="Pragma" content="no-cache"/>
    <meta http-equiv="Cache-control" content="no-cache"/>
    <meta http-equiv="Cache" content="no-cache"/>
  
  
    <div class="container"/>
      <div class="target">   !</div>
    </code></pre></div>
    <script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.js"/>
    <script>
      $(function () {
        // $(document).on('click', '.target', function () {})
        $('body').on('click', '.target', function () {
          alert('     ！！！');
        });
      });
    </script>
  

 
 <h2>    </h2> 
 <hr/> 
 <p>     6 ：</p> 
 <ul> 
  <li><p>  <code>click</code>            (  <code>.target</code> )  </p></li> 
  <li><p>        <code></code>    <code><button/></code>        </p></li> 
  <li><p>            <code>onclick=""</code>(</p><div class="target" onclick="">   !</div>)</li> 
  <li><p>  <code>click</code>    <code>touchend</code>   <code>touchstart</code>（    preventDefault）</p></li> 
  <li><p>  <code>click</code>        <code>document</code>   <code>body</code>       </p></li> 
  <li><p>             <code>cursor: pointer;</code> (cursor: pointer; -webkit-tap-highlight-color: transparent;)</p></li> 
 </ul> 
 <p>     。    Safari  ，                      。     <code>cursor: pointer;</code>             。</p> 
 <h2>  </h2> 
 <hr/> 
 <h3>  </h3> 
 <hr/> 
 <p>iOS   <code>input</code>   input    <code>cursor: pointer;</code>   ，    iOS         <code>cursor</code>         <code>click</code>       </p> 
 <h3>    </h3> 
 <ul> 
  <li><p>   font-size: 0;</p></li> 
  <li><p>  <code>click</code>    <code>touchend</code> （    preventDefault）</p></li> 
 </ul> 
 <h2>    </h2> 
 <ul> 
  <li><p>https://github.com/facebook/react/issues/134</p></li> 
  <li><p>http://stackoverflow.com/questions/5421659/html-label-command-doesnt-work-in-iphone-browser/6472181#6472181</p></li> 
 </ul> 
</div>
                            </div>
Ext Js入門第1編-Ext環境構築