Question

当我尝试将JavaScript / jQuery .hover或.click个函数绑定到:disabled input字段时，没有任何函数获得被解雇。

请参阅下面的代码段。

＆＃13;

$(document).ready(function() {
  var button_1 = $("#button_1");
  
  button_1.hover( function() {
    console.log("Hover event button 1");
  });
  button_1.click( function() {
    console.log("Click event button 1");
  });
});

function button_2_click() {
  console.log("Click even button 3");
}
function button_2_hover() {
  console.log("Hover even button 3");
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<p>Hover over one of the buttons, and you'll see none of the console messages gets logged. When removing the `disabled` property, all events are fired.</p>
<button id="button_1" disabled>Disabled 1</button>
<button id="button_2" onmouseover="button_2_hover();" onclick="button_2_click();" disabled>Disabled 2</button>

＆＃13;

MDN对disabled属性说明如下：

指示元素是否被禁用。如果这个属性是设置为true，禁用该元素。通常是残疾人的元素用灰色文字绘制。如果元素被禁用，则不会响应用户操作，它无法集中，并且命令事件不会开枪。

我试图改变的是，当用户:hover超过button:disabled时，会显示一条消息。

我知道我可以使用title="text"。然而，事实并非如此。我在右上角使用一个小弹出框并显示一条消息。邮件存储在javascript object。

中

我的问题：
我怎样才能做到这一点？或者是否无法将.hover() onmousemove字段绑定到disabled或input个字段？

Answer 1

click部分是per specification：

禁用的表单控件必须防止在元素上调度在用户交互任务源上排队的任何click个事件。

看起来您正在测试的用户代理会更进一步，并且还会阻止与悬停相关的事件（例如，Chrome和IE似乎）。其他用户代理可能不会（例如，Firefox允许与悬停相关的事件。）

如果您想要这些事件，您可以启用按钮，然后将它们设置为禁用，并防止点击它们执行其他操作，但这可能会造成令人困惑的用户体验。

或者，您可以将span 置于<{1}}内，然后将事件挂钩：

＆＃13;

button

＆＃13;

$(document).ready(function() {
  var button_1 = $("#button_1 span");
  
  button_1.hover( function() {
    console.log("Hover event button 1");
  });
  button_1.click( function() {
    console.log("Click event button 1");
  });
});

＆＃13;

按钮的某些部分不会触发事件（环绕声的位），尽管你可以通过CSS修复它......

为什么我们不能将函数绑定到：禁用输入字段？

1 个答案: