Reasons why binding click to body on IOS devices does not work and solutions

Event Background:

Recently, I encountered an bug while doing a mobile business, and the click event agent that binds body to body on ios bubbled up to some elements and did not work.

Think about:

Using jquery to temporarily show the event binding code, all elements tagged with the ES15en-ES16en attribute are broker to body via the event

$('body').on('click','[data-tip]',function(e){
console.log($(this.).attr('data-tip')) 
}) 

This works fine on both android and pc, but it doesn't work on ios with partial tags. tr, span... Labels like this

Solutions:

1. Replacing the click event with the touch event can also solve the click latency problem of 300ms, but the processing that requires ES37en.stopPropagation () to prevent bubbling can be cumbersome.

2. Perform one more event binding on elements that do not bubble properly, such as tr < table > Do one more event broker.

3. The simplest way is to add the cursor:pointer attribute to the css attribute of the element that does not bubble properly.

4. Replace it with a label that bubbles normally.