Javascript 检查 href 是否被点击

Question

我有一个滑块，每当调用下一个按钮时我都需要调用一些 javascript。我无法编辑滑块本身的 html 以将 onClick 添加到 html。所以我需要检查是否点击了 href 元素。

我已经尝试选择整个 div 来让 return 在单击 div 时发出警报，但当我单击 phone 上的 href 时它不起作用。

document.querySelector('.wmpci-popup-body a.flex-next').onclick = function() {
   alert("button was clicked");
};

<div class="wmpci-popup-body">
    <ol class="flex-control-nav flex-control-paging">
        <li><a href="#" class="flex-active">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">4</a></li>
        <li><a href="#">5</a></li>
    </ol>
    <ul class="flex-direction-nav">
        <li class="flex-nav-prev"><a class="flex-prev flex-disabled" href="#" tabindex="-1"></a></li>
        <li class="flex-nav-next"><a class="flex-next" href="#"></a></li>
    </ul>
</div>

我希望有人能告诉我我当前的代码有什么问题。

Answer 1

如果您想限制默认功能，您可以添加 event.preventDefault();

document.querySelector('.wmpci-popup-body a.flex-next').on('click touchstart', function(event) {
  event.preventDefault();
  alert("button was clicked");
});

Answer 2

像divmeister 提到的那样，您应该使用touchstart and/or 点击事件。你可以在原版中做这样的事情：

const eventHandler = () => alert("button was clicked");

const element = document.querySelector('.wmpci-popup-body a.flex-next');
element.addEventListener('touchstart', eventHandler, false);
element.addEventListener('click', eventHandler, false);

我提供了一些代码和盒子来在移动设备上进行测试： https://codesandbox.io/s/staging-night-fogx3

Javascript 检查 href 是否被点击

Javascript check if href is clicked

javascript

mobile

click