将鼠标悬停在多个元素上时，仅触发一次onmouseover

Question

I'd like to have basic code like the following:

<span onmouseover="alert('hi')">Hello, <span onmouseover="alert('hello')">this</span> is a test</span>

However, I'd like to keep it from firing both of these events if both are being hovered over; eg if I hover over "this" it should fire only its event and alert "hello." How can I do this?

Thank you in advance!

Answer 1

 $(".container").hover(function(){ alert($(this).attr("id")); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <span class="container" id="hi"> Hello, </span> <span class="container" id="hello"> this </span> <span class="container" id="hi"> is a test </span> 

Answer 2

I am going to assume that the overlapping elements are not the same size. Ie one is bigger than the other.

HTML and inline js:

<span class="container" id="hi"> 
 Hello, 
 </span> 
 <span class="container " id="hello">
 this </span>
<script>
 var hello =   
document.getElementById("hello");          
   var this =       
  document.getElementById
    ("this");
    hello.addEventListener("click
   ",pop("hello"));                                                                  


this.addEventListener("click",pop(" hi");
 function pop(string) {
 window.alert(string);
}
 <\script>

That being said very little is mentioned about the nature of the elements this and hello. Op plz show your CSS and update ques

Answer 3

Here's the relevant portion of what I ended up using. I used JQuery.

var mouseHovered = function(element) {
    //get all hovered spans
    var hoveredElements = $("span:hover");
    //get the element with the smallest text
    var smallestElement;
    for(var i=0; i<hoveredElements.length; i++) if(!smallestElement || hoveredElements[i].textContent.length < smallestElement.textContent.length) smallestElement = hoveredElements[i];
    //if this is the smallest text in the elements
    if(element == smallestElement) {
        //log the text
        console.log(element.textContent);
    }
}

Answer 4

You need to prevent Event bubbling when you hover/click on inner span. This can be done using event.stopPropagation() .

Look at two solutions provided at this JSFiddle .

Solution 1 - Use of e.stopPropagation() in the handler function innerSpan() .

Solution 2 - Use of event.stopPropagation() in inline onclick event.

<span onclick="alert('Outer span');">
    Outer
    <span onclick="event.stopPropagation(); alert('Inner span');">
        Inner
    </span>
</span>