Question

有没有办法在禁用的html元素上调用悬停事件？我找到了包装div的解决方案，但它不能很好地工作。

Forexample：

<input type="text" id="someidtext" value="somevalue" disabled="disabled" />
<select id="someidselect" disabled="disabled" > 

$("#someidtext").mouseenter(function () {});
$("#someidselect").mouseenter(function () {});

由于

Answer 1

我认为最好的解决方案是检查处理程序中的条件。

$('#someidtext').mouseenter(function (event) {
    if(!this.disabled){
        console.log('x')
    }
})

演示：Fiddle

如果无法做到这一点，您可能需要考虑基于事件委托的处理程序，如

<div id="someidtext_wrapper">
    <input type="text" id="someidtext" value="somevalue" disabled="disabled" />
</div>

然后

$('#someidtext_wrapper').on('mouseenter', 'input:not(:disabled)', function () {
    console.log('x')
});

演示：Fiddle

注意：这些解决方案基于在注册事件处理程序后动态禁用状态更改的假设

Answer 2

请参阅ID应该是唯一的，因此如果您有类名，那么您可以这样做：

$(".someidtext:not(:disabled)").mouseenter(function (e) {
     console.log(e.type);
});

或更多全球：

$(":input:not(:disabled)").mouseenter(function (e) {
     console.log(e.type);
});

Demo with :input

:input是选择器，它选择所有输入元素，无论该元素是select，text，submit，button，textarea等。

Answer 3

至少有两种可能的解决方案。首先，在处理程序函数中添加一个条件，如下所示：

$("#someidtext").mouseenter(function () {
    if (!$(this).attr('disabled')) {
        // the function code
    }
});

其次，您可以使用委托将事件绑定到首先未禁用的输入：

$(document).on("mouseenter", "#someidtext:not(:disabled)", function () {
    // the function code
});

不要在禁用的元素上调用悬停事件

3 个答案: