在ios的Safari浏览器中，当有一个“ onclick”内联孩子时，有一个“ onmouseover”内联父母时，为什么单击该孩子时触发了mouseover事件？

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>