onmouseover在内部元素上执行

Question

我有一个div，它是某些文本的包装器：

<div class="timeSpanWrapper" data-occupied="false">
    <span>@day.ToString("HH:mm", new System.Globalization.CultureInfo("da-DK"))</span>
</div>

当我将鼠标放在包装器上时，我想执行一个函数：

$(".timeSpanWrapper").on("mouseover", function (evt) {
    if (evt.ctrlKey) {
        setTimeSlot($(this));
    }
});

该函数被执行，但是如果我将<span>悬停在timeSpanWrapper div中，这也不是我想要的，因为该方法将被触发两次。

这是一种解决方法？

注意：

我尝试了建议的答案。当鼠标悬停在span上时，该方法不会被执行，但是当我再次将span留给父div时会执行该方法，这是一个问题，因为父div是一个在中心有一些文本的框。

Answer 1

通过确保目标是绑定元素，您可以确保它不会在子元素上执行

$(".timeSpanWrapper").on("mouseover", function (evt) {
    if (evt.ctrlKey && this === evt.target) {
        setTimeSlot($(this));
    }
});

或者只使用mouseenter事件，这似乎更合适

$(".timeSpanWrapper").on("mouseenter", function (evt) {
    if (evt.ctrlKey) {
        setTimeSlot($(this));
    }
});

Answer 2

您可以使用.not()功能来避免跨度：

$(".timeSpanWrapper").not(".timeSpanWrapper span").on("mouseover", function (evt) {
    if (evt.ctrlKey) {
        setTimeSlot($(this));
    }
});

Answer 3

发生这种情况的原因是mouseover事件会冒泡到它的子元素。你需要使用mouseenter来避免这种情况。

尝试在jsfiddle demo

中使用鼠标悬停更改mouseenter

$(".timeSpanWrapper").on("mouseenter", function (evt) {
     $('body').append('<span>entered</span>');
});