gpt4 book ai didi

javascript - 当选定标签具有禁用属性时,我可以在它们上触发事件吗?

转载 作者:行者123 更新时间:2023-12-01 00:05:16 24 4
gpt4 key购买 nike

我禁用了页面中所有以_test结尾的id选择(这里一切都很好),我想做的是显示当选择被禁用并且鼠标位于它们上方时,标题

我的问题是,似乎 disabled 属性会阻止每个事件的执行(我也尝试使用 click 而不是 mouseover,但是结果没有改变)。事实上,我尝试注释 hide_children_option(); 并且该函数起作用了。

所以主要问题是:我可以禁用选择,但同时触发事件(或至少使我认为真实的)?

在代码片段下方:

    function hide_children_option() {
$("[id$=_test]").attr("disabled", "disabled");
}

$(document).ready(function() {
hide_children_option();

$("[id$=_test]").mouseover(function() {
console.log("Hey you!");

var attr = $(this).attr("disabled");
if (typeof attr !== typeof undefined && attr !== false) {
console.log("This is disabled");
}
});
});
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
Official 1
<select id="obj1_official">
<option value="0">0</option>
<option value="1">1</option>
</select>
<br>
Test 1
<select id="obj1_test">
<option value="0">0</option>
<option value="1">1</option>
</select>
<br>
Official 2
<select id="obj2_official">
<option value="0">0</option>
<option value="1">1</option>
</select>
<br>
Test 2
<select id="obj2_test">
<option value="0">0</option>
<option value="1">1</option>
</select>
<br>

最佳答案

无法将鼠标事件添加到禁用的输入。不过,我认为您可以使用两种解决方案。

  1. 最简单的方法是在选择上添加 title="" 属性,这会显示工具提示
  2. 如果您想要自己的逻辑,您可以围绕选择创建一个包装器并将事件附加到该包装器。 (请记住,您需要调整此父级的样式以使其显示为内联,并且需要禁用禁用选择的指针事件)

示例:

    function hide_children_option() {
$("[id$=_test]").attr("disabled", "disabled");
}

$(document).ready(function() {
hide_children_option();

$(".test-wrapper").mouseover(function() {
console.log('hey!');
});
});
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
Official 1
<select id="obj1_official">
<option value="0">0</option>
<option value="1">1</option>
</select>
<br>
Test 1
<select id="obj1_test" title="Some text you want to show">
<option value="0">0</option>
<option value="1">1</option>
</select>
<br>
Official 2
<select id="obj2_official">
<option value="0">0</option>
<option value="1">1</option>
</select>
<br>
Test 2
<div class="test-wrapper" style="display:inline;">
<select id="obj2_test" style="pointer-events:none;">
<option value="0">0</option>
<option value="1">1</option>
</select>
</div>
<br>

关于javascript - 当选定标签具有禁用属性时,我可以在它们上触发事件吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60431337/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com