脚本宝典收集整理的这篇文章主要介绍了

iOS Safari 中点击事件失效的解决方法

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。
<p><code></p> <h2 id="articleHeader0">问题描述</h2> <p>当使用委托给一个元素添加click事件时,如果事件是委托到 document 或 body 上,并且委托的元素是默认不可点击的(如 <a href="http://www.js-code.com/tag/div" title="div" target="_blank">div</a>, span 等),此时 click 事件会失效。</p> <p>可以使用下面的代码在 iOS 中进行测试。</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="<!DOCTYPE html><br /> <html><br /> <head><br /> <meta charset=&quot;UTF-8&quot;><br /> <meta name=&quot;viewport&quot; content=&quot;width=device-width&quot;><br /> <title>iOS click bug test</title></p> <style> .container { } .target { display: block; text-align: center; margin: 100px 30px 0; padding: 10px 0; border: 1px solid #ccc; } </style> <p></head><br /> <body> </p> <div class=&quot;container&quot;> <div class=&quot;target&quot;> Click Me! </div> </p></div> <p> <script src=&quot;//code.jquery.com/jquery-2.1.4.min.js&quot;></script><br /> <script type=&quot;text/javascript&quot;> // 或者 $(document).on('click', ....) $('body').on('click', '.target', function (e) { alert('click'); }); </script><br /> </body><br /> </html>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="xml hljs"><code class="html"><span class="hljs-meta">&lt;!DOCTYPE html&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">html</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">"UTF-8"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"viewport"</span> <span class="hljs-attr">content</span>=<span class="hljs-string">"width=device-width"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>iOS click bug test<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">style</span>&gt;</span><span class="css"> <span class="hljs-selector-class">.container</span> { } <span class="hljs-selector-class">.target</span> { <span class="hljs-attribute">display</span>: block; <span class="hljs-attribute">text-align</span>: center; <span class="hljs-attribute">margin</span>: <span class="hljs-number">100px</span> <span class="hljs-number">30px</span> <span class="hljs-number">0</span>; <span class="hljs-attribute">padding</span>: <span class="hljs-number">10px</span> <span class="hljs-number">0</span>; <span class="hljs-attribute">border</span>: <span class="hljs-number">1px</span> solid <span class="hljs-number">#ccc</span>; } </span><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name"><a href="http://www.js-code.com/tag/div" title="浏览关于“div”的文章" target="_blank" class="tag_link">div</a></span> <span class="hljs-attr">class</span>=<span class="hljs-string">"container"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"target"</span>&gt;</span> Click Me! <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"//code.jquery.com/jquery-2.1.4.min.js"</span>&gt;</span><span class="undefined"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/javascript"</span>&gt;</span><span class="javascript"> <span class="hljs-comment">// 或者 $(document).on('click', ....)</span> $(<span class="hljs-string">'body'</span>).on(<span class="hljs-string">'click'</span>, <span class="hljs-string">'.target'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">e</span>) </span>{ alert(<span class="hljs-string">'click'</span>); }); </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span></code></pre> <h2 id="articleHeader1">解决办法</h2> <p>解决办法有 4 种可供选择:</p> <ol> <li>​将 click 事件直接绑定到目标​元素(​​即 .target)上</li> <li>将目标​元素换成 <code>&lt;a&gt;</code> 或者 button 等可点击的​元素</li> <li>将 click 事件委托到​​​​​非 document 或 body 的​​父级元素上</li> <li>给​目标元素加一条样式规则 cursor: pointer;</li> </ol> <p>​推荐后两种。从解决办法来看,​推测在 safari 中,不可点击的元素的点击事件不会冒泡到父级元素。通过添加 cursor: pointer 使得元素变成了可点击的了。</p> <p></code></p>

总结

以上是脚本宝典为你收集整理的

iOS Safari 中点击事件失效的解决方法

全部内容,希望文章能够帮你解决

iOS Safari 中点击事件失效的解决方法

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过