In safari of ios, when there is a “onclick” inline a child, and a “onmouseover” inline a parent, why mouseover event fired when click the child?

Question

In safari of ios, when there is a "onclick" inline a child element, and a "onmouseover" inline a parent element. When touch the child, I want the click event be fired, but first the mouseover event be fired.

<span onmouseover='dosomething1()'>
    <ul>
        <li onclick='dosomething2()'></li>
    </ul>
</span>

I open this html in safari in iPhone, when I click/touch the li element, dosomething1 executed, and I click/touch the li element again, dosomething2 executed. What can I do to make sure only dosomething2 execute when I click the li element?

Answer 1

Because the mouseover event bubbles from the child to the parent, and for maximum compatibility, mobile browsers fire a mouseover event when the finger position changes.

If you use proper event handling, or pass the event object into dosomething1 , dosomething1 can look at event.target to see whether the target of the mousemove was the span or a descendant element and take appropriate action (or appropriately take no action).

Alternately, you can hook mouseover on (say) the ul and stop the event from bubbling ("propagating") to its ancestors.

Example of using proper event handling and doing the check in the mousemove handler:

 document.getElementById("the-span").addEventListener("mousemove", function(e) { if (e.target === this) { dosomething1(); } }); document.getElementById("the-li").addEventListener("click", dosomething2); function dosomething1() { console.log("mousemove on the span"); } function dosomething2() { console.log("click on the li"); } 

 <span id="the-span"> <ul> <li id="the-li">Text</li> </ul> text in span outside the li </span>