Question

我想拥有如下基本代码：

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

然而，如果两者都被徘徊，我想阻止它发射这两件事;例如如果我将鼠标悬停在“这个”上，它应该只发射它的事件并警告“你好”。我怎么能这样做？

提前谢谢！

Answer 1

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

我将假设重叠元素的大小不同。即一个比另一个大。

HTML和内联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>

关于这个和你好的元素的性质，提到的很少。 Op plz显示您的CSS并更新问题

Answer 3

这是我最终使用的相关部分。我用过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

您需要在内部跨度Event bubbling时阻止hover/click。这可以使用event.stopPropagation()完成。

查看this JSFiddle提供的两个解决方案。

解决方案1 - 在处理函数e.stopPropagation()中使用innerSpan()。

解决方案2 - 在内联event.stopPropagation()事件中使用onclick。

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

当鼠标悬停在多个元素上时，只触发一个onmouseover

4 个答案: