mouseover(移入) mouseout(移出)

mouseover
此事件类型冒泡,可能引起很多头痛的问题。例如,当鼠标指针移出Inner元素,事件将被发送到Inner元素,然后冒泡到Outer元素 。这可能会触发绑定的mouseover处理函数。
mouseout
此事件类型冒泡,可能引起很多头痛的问题。例如,当鼠标指针移出Inner元素,事件将被发送到Inner元素,然后冒泡到Outer元素 。这可能会触发绑定的mouseout处理函数。

$(".class").mouseover(function () {
   console.log("移入")
});
$(".class").mouseout(function () {
   console.log("移出")   
});
或
$(".class").on("mouseover",function () {
   console.log("移入")
});
$(".class").on("mouseout",function () {
   console.log("移出")   
});
或
// 为所有 .class 元素委托 mouseover 和 mouseout 事件
$("body").on({
    mouseover: function() {
        // 获取触发事件的元素的索引
        let index = $(this).index(".class");
        console.log("移入,索引:", index);
    },
    mouseout: function() {
        let index = $(this).index(".class");
        console.log("移出,索引:", index);
    }
}, ".class");

mouseenter(移入) mouseleave(移出)

mouseenter
此事件是Internet Explorer专有的。该事件在平时很有用,jQuery的模拟这一事件,可用于所有浏览器。该事件在鼠标移入到元素上时被触发。任何HTML元素都可以接受此事件。
mouseleave 
此事件是Internet Explorer专有的。该事件在平时很有用,jQuery的模拟这一事件,可用于所有浏览器。该事件在鼠标离开元素上时被触发。任何HTML元素都可以接受此事件。

$(".class").mouseenter(function () {
   console.log("移入")
});
$(".class").mouseleave(function () {
   console.log("移出")   
});
或
$(".class").on("mouseenter",function () {
   console.log("移入")
});
$(".class").on("mouseleave",function () {
   console.log("移出")   
});
或
// 为所有 .class 元素委托 mouseenter 和 mouseleave 事件
$("body").on({
    mouseenter: function() {
        // 获取触发事件的元素的索引
        let index = $(this).index(".class");
        console.log("移入,索引:", index);
    },
    mouseleave: function() {
        let index = $(this).index(".class");
        console.log("移出,索引:", index);
    }
}, ".class");

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐