[英]Why can't we bind functions to :disabled input fields?
When i try to bind JavaScript
/ jQuery
.hover
or .click
functions to an :disabled
input
field, none of the functions gets fired. 当我尝试绑定
JavaScript
/ jQuery
.hover
或.click
功能到:disabled
input
字段,没有的功能被炒鱿鱼。
See the snippet below. 请参见下面的代码段。
$(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"); }
<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>
MDN says the following about the disabled
property: MDN对
disabled
属性说以下内容:
Indicates whether the element is disabled or not.
指示是否禁用该元素。 If this attribute is set to true the element is disabled.
如果将此属性设置为true,则禁用该元素。 Disabled elements are usually drawn with grayed-out text.
禁用的元素通常使用灰色文本绘制。 If the element is disabled, it does not respond to user actions, it cannot be focused, and the command event will not fire.
如果禁用了该元素,则它不会响应用户的操作,无法使其处于焦点状态,并且不会触发命令事件。
What i tried to archieve is, when a user :hover
's over an button:disabled
, a message would be shown. 我试图存档的是,当用户
:hover
在button:disabled
上方时,将显示一条消息。
I know i could use a title="text"
for that. 我知道我可以为此使用
title="text"
。 However, thats not the case. 但是,事实并非如此。 I use an small popup at the right top corner with an message.
我在右上角使用一个小弹出窗口,并显示一条消息。 The message is stored inside an
javascript object
. 该消息存储在
javascript object
。
My question: 我的问题:
How can i make an workaroud for this? 我该如何为此做个工作? Or is it just not possible to bind
.hover()
or onmousemove
functions the disabled
input
fields? 还是无法将
.hover()
或onmousemove
函数绑定到disabled
input
字段?
The click
part is per specification : click
部分是根据规格 :
A form control that is disabled must prevent any
click
events that are queued on the user interaction task source from being dispatched on the element.禁用的表单控件必须防止在用户交互任务源上排队的任何
click
事件在元素上分派。
It would appear that the user agents you're testing in take it further and also prevent the events related to hovering (Chrome and IE seem to, for instance). 您正在测试的用户代理似乎会更进一步,并防止与悬停有关的事件(例如,Chrome和IE似乎)。 Other user agents may not (Firefox allows the events related to hover, for instance.)
其他用户代理可能不会(例如,Firefox允许与悬停有关的事件。)
If you want those events, you could leave the buttons enabled and then style them to look disabled and prevent clicking them doing what they otherwise do, although it may make for a confusing user experience. 如果需要这些事件,可以使按钮处于启用状态,然后将其设置为禁用状态,并防止单击它们以其他方式进行操作,尽管这可能会使用户感到困惑。
Alternately, you could put a span
inside the button
, and hook the events on that: 或者,你可以把一个
span
内 button
,并勾上的事件:
$(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"); }); });
<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><span>Disabled 1</span></button>
There are parts of the button that won't trigger the events (bits of the surround), though you could probably fix that with CSS... 按钮的某些部分不会触发事件(环绕声的位),尽管您可以使用CSS来解决此问题...
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.