HTML表格在鼠标移动到TD之间时会触发mouseOut事件

Question

我已经在表格上设置了鼠标移出事件处理程序，但是如果我将鼠标移动到TD上，事件会被触发。如何防止表格在TD之间闪烁？http://jsfiddle.net/2ZRBx/

- Registered User

Answer 1

由于您正在使用jQuery，我建议您移除内联JavaScript并采用以下方法：

function go2() {
    $("#t").effect("pulsate", {
        times: 1
    }, 200);
}
$('#t').mouseleave(function() {
    go2();
});​

jsFiddle 示例。

- j08691

---

为什么不使用JavaScript回调（正如我在我的答案中建议的那样）？而且从DOM中获取2次#t元素真的很耗时。更好的方法是在go2函数中使用$(this)或将$('#t')保存在变量中并使用它。 - Wouter J

你可以查看关于mouseleave的文档，并在http://api.jquery.com/mouseleave/上找到jQuery的mouseout和mouseleave差异的一个很好的示例。 - j08691

Answer 2

使用jQuery事件API代替你现在使用的内联事件触发方式。如果使用jQuery API，它将正常工作。由于你正在使用jQuery1.7.1：

jQuery(function($) {
    $("#t").on('mouseleave', function() {
        $(this).effect("pulsate", { times:1}, 200);
    });
}​);​

示例： http://jsfiddle.net/2ZRBx/6/

- Wouter J

---

关键在于不是将处理程序从内联JavaScript移动到jQuery事件，而是使用mouseleave事件而不是mouseout。如果您在上面的代码中使用mouseout，则问题仍然存在。 - Mik

Answer 3

将表格包裹在一个div中，然后将mouseout事件放在该div上。

- saluce