javascript - 完全禁用元素，包括在单击操作时调用其他 JavaScript 函数的链接

Question

<li class=" active">
<input class="check-shopby" type="checkbox" onclick="$(this).next().click()" checked="checked">
    <a class="checked" href="http://mysite/~dev433/products//cooking/cook-tops.html" onclick="$(this).previous().checked = false;" style="cursor: pointer;">
        <img width="150" alt="" src="site/media/wysiwyg/attribute_Sets_images/Fagor-CE9-20-1.jpg">
        <span> Electricity (74) </span>
    </a>
    <a onclick="otherjavascriptfunction" href="/somewhere">link</a>
</li>

好的，这是我在 li 项目中的内容，当我在某些条件下我希望它(li 项目本身和里面的所有其他可点击项目)完全不可点击，如果甚至可能一些不可点击(禁用)标志。

这是我尝试过的，但它替换了我的内容，$("div li a").replaceWith(function() { return $(this).text(); });

Answer 1

您可以添加将在 captureMode 中监听 li 元素的 clickEventListener

If true, useCapture indicates that the user wishes to initiate capture. After initiating capture, all events of the specified type will be dispatched to the registered listener before being dispatched to any EventTargets beneath it in the DOM tree. Events which are bubbling upward through the tree will not trigger a listener designated to use capture.

var disableClicks = document.getElementsByClassName("disable-inner-clicks");
disableClicks.forEach(function(element){
   element.addEventListener('click', function(e){
      e.preventDefault();
      e.stopPropagation();
   }, true);
});

然后，对于任何要禁用点击的元素，只需添加 class =disable-inner-clicks

<li class="active disable-inner-clicks">
  ....
</li>

无论里面有什么内容，点击都会被禁用，当你的条件满足时，你只需将类添加到元素