时间戳

首页 > 解决方案 > 当它们具有禁用属性时，我可以在选择标签上触发事件吗？

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

问题描述

我禁用了页面中以_testid结尾的所有选择（这里一切都很好），我想做的是显示一段时间选择被禁用并且鼠标悬停在它们上方。title

我的问题是该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>

标签： javascriptjqueryhtmlhtml-selecteventtrigger

解决方案

无法将鼠标事件添加到禁用的输入。但是，我能想到您可以使用两种解决方案。

  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>

推荐阅读