Safari of jQuery Event Delegate

What is an event delegate

Event delegate is a kind of event binding method in Jquery, which is different from the common event binding method, which binds events to the target element, but binds events to the parent element to execute binding functions through event bubbling.

// Common event bindings (Jquery)
$(element).click(function(){
//do something
})
// Event delegate (Jquery)
$(parents).on("click",element,function(){
//do something
})

Principle of event delegate

The event delegate binds the event listener to the parent of the target element, bubbles to the parent of the bound event when the target element responds to the event, judges whether the target element of the event is an incoming element, and if so, executes the incoming function.

// Simple implementation Jquery Event delegate of 
<ul id="oParent"></ul>
<a id="oClick" href="javascript:void(0)">click</a>
<script type="text/javascript">
var oParent=document.getElementById("oParent"),oClick=document.getElementById("oClick");
Object.prototype.on=function(ev,fn,obj){
var sClass=Object.prototype.toString.call(obj);
if(obj||sClass.indexOf("HTML")===-1){// Pretend judgment 1 Whether event delegates are required under 
this.addEventListener(ev,function(e){
var e=e||window.event;
if(e.target===obj&&e.type===ev){
fn.call(e.target);// Pass in the target element 
}
},false);
}else{
this.addEventListener(ev,fn,false);
}
}
document.on("click",function(){console.log(this)},oClick); 

There is no compatibility and other processing, just to understand the principle, and you can leave a message to point out what questions you have.
What's the use of event delegates

Say so many things, what's the use of event delegation? I think the biggest advantage of event delegates is that dynamically generated elements also retain the original event bindings.

//a When you click, ul Will be added 1 A li , new li Have binding events 
<ul id="oUl">
<li><li>
</ul>
<a id="addBtn" href="javascript:void(0)" target="_self"> Add li</a>
<script>
// Using common event bindings to implement 
$("#oUl").find("li").on("click",function(){
//do something
})
$("#addBtn").on("click",function(){
$("#oUl").append("<li></li>");
$("#oUl").find("li").on("click",function(){
//do something
})
})
// Performance aside, is this beautiful and logical implementation 
// Using event delegates to implement 
$("document").on("click","#oUl li",function(){// Here the delegate element is flexible, as long as it is a parent, but it is not dynamically generated (dynamic generation loses the meaning of event delegate) 
//do something
})
$("#addBtn").on("click",function(){
$("#oUl").append("<li></li>");
})
// Is this code much simpler and solves the problem of repeated binding 

Today's topic, Sarfari of Event Delegation

1 problem encountered in the project, the click event delegate failed on the safari of the mobile terminal

<p class="loadmore"> Load more </p>
<script type="text/javascript">
$(document).on("click",".loadmore",function(){
alert("ok")
})
</script>

Look at the above code, it's very simple, no problem, except safari of ios, other browsers can pop up "ok" normally, 1 began to think of what there is a place to stop bubbling, but did not find, jq problem? I still can't change it. Normal binding (not using event delegate) no problem, other thought will be bug of jq, if it is bug of jq, then the previous project will also have similar bug, so go to the line to find the relevant code

<a id="test" target="_slef" href="javascript:void(0)">test</a>
<script>
$("document").on("click","#test",function(){
//do something
})
</script>

Tested on Android and ios devices, there was no problem, and the codes were similar, but did you notice that the tags were different (how important semantics of html is), so p was replaced by a, and the problem was solved perfectly. Finally, I went to Google for one time.

In safari of ios, when an click event is added to an element by delegation, if the event is delegated to document or body, and the delegated element is not clickable by default (such as div, span, etc.), the click event will be invalid.

The reason is clear: click events for non-clickable elements in safari do not bubble on document and body.

Solution

1. Bind click events directly to elements (without event delegates)

2. The element that needs to be bound to the click event is changed to < a > Or < button > Clickable elements, etc.

3. Delegate an click event to a parent element that is not doucument or body

4. Add an css style cursor: pointer to the target element (this is recommended for convenience)