When an element is added to the end ios click event, if the event is a delegate to document or body on, and commissioned by the element is not clickable default (such as div, span, etc.), then click the event will fail.
demo:
<!DOCTYPE html> <html lang="en"> <head> <title></title> <meta charset="UTF-8"> </head> <body> <div class="container"></div> <div class="target">点击我!</div> </div> <script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.js"></script> <script> $(function () { // $(document).on('click', '.target', function () {}) $('body').on('click', '.target', function () { alert('我被点击了！！！'); }); }); </script> </body> </html>
Solution
There are six solutions:
-
The
clickevent directly bind to the target element (that is ) on.target -
Will replace the target element or elements such as clickable
<a><button> -
To add an empty target element
onclick=""(<div class = "target" onclick = ""> Click me! </ Div> ) -
The
clickchangedtouchendortouchstart(note plus preventDefault ) -
The
clickelement to a non-commissioneddocumentorbodythe parent element -
To add a target element style rule
cursor: pointer;( the Cursor: pointer; -webkit-TAP-highlight-Color: transparent; )
The latter two is recommended. Speculate in Safari, non-clickable elements click event is not bubbling to the parent element. By adding cursor: pointer; such that the element becomes a clickable.
supplement
problem
iOS system input and elements within the input cursor: pointer; failure, so the iOS system needs the cursor property to take effect in the click event can not be triggered
Solution
-
Set font-size: 0;
-
The
clickchangetouchend(note plus preventDefault )