时间戳

首页 > 解决方案 > 如何使事件适用于禁用的字段集中的列表

javascript - 如何使事件适用于禁用的字段集中的列表

问题描述

** 如何使“li”标签与字段集中的 javascript 事件一起工作（禁用）。我不知道为什么它不起作用，请帮助解决这个问题。**

const enabledButton = document.querySelector('.file-download');

enabledButton.addEventListener('click', () => alert("ok"));
.file-displayer {
  padding-left: 5px;
  max-height: 50px;
  overflow-y: scroll;
  overflow-x: auto;
}

.file-download {
  display: block;
  cursor: pointer;
  color: blue;
  font-size: 12px;
}

[role="button"] {
  -webkit-appearance: button;
  appearance: button;
  cursor: default;
  font-style: normal;
  -webkit-user-select: none;
  user-select: none;
}
<link href="https://www.w3schools.com/w3css/4/w3.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<fieldset disabled>
  <label id="77">&nbsp;Supporting documents</label><br id="78"><button id="79" type="button" class="w3-button w3-indigo w3-border w3-round-large" style="margin-top: 3px;">&nbsp;Attach</button><input id="80" name="supdoc" type="file" required="true" accept="*"
    style="display: none;">
  <ul id="81" name="supdoc_displayer" class="file-displayer" style="width: 100%;"><span><i class="fa fa-minus-square w3-left" title="delete" aria-hidden="true" style="color: red; cursor: pointer;">&nbsp;&nbsp;</i><span class="sr-only">delete</span>
    <li class="file-download" role="button" tabindex="0" title="download">roles.PNG</li>
    </span>
  </ul>
</fieldset>
</body>

标签： javascripthtmlcss

解决方案

如果你添加 pointer-events:auto!important;到.file-download类将工作。如果您在没有添加指针事件的情况下使用开发控制台，您将看到禁用父级的方式。

const enabledButton = document.querySelector('.file-download');

enabledButton.addEventListener('click', () => alert("ok"));
.file-displayer {
padding-left: 5px;
max-height: 50px;
overflow-y: scroll;
overflow-x: auto;
}

.file-download {
    display: block;
    cursor: pointer;
    color: blue;
    font-size: 12px;
    pointer-events:auto!important;
}

[role="button"] {
  -webkit-appearance: button;
  appearance: button;
  cursor: default;
  font-style: normal;
  -webkit-user-select: none;
  user-select: none;
}
<link href="https://www.w3schools.com/w3css/4/w3.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<fieldset disabled>
  <label id="77">&nbsp;Supporting documents</label><br id="78"><button id="79" type="button" class="w3-button w3-indigo w3-border w3-round-large" style="margin-top: 3px;">&nbsp;Attach</button>
  <input id="80" name="supdoc" type="file" required="true" accept="*" style="display: none;">
  
  <ul id="81" name="supdoc_displayer" class="file-displayer" style="width: 100%;"><span><i class="fa fa-minus-square w3-left"  title="delete" aria-hidden="true" style="color: red; cursor: pointer;">&nbsp;&nbsp;</i><span class="sr-only">delete</span><li class="file-download" role="button"
    tabindex="0" title="download">roles.PNG</li></span></ul>
    
  </fieldset>
</body>

推荐阅读