Question

我有一个滑块，无论何时调用下一个按钮，我都需要在其中调用一些javascript。我无法编辑滑块本身的html，以将onClick添加到html。因此，我需要检查是否单击了href元素。

我尝试选择整个div，如果单击了div，这会返回警报，但是当我单击手机上的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

就像上面提到的divmeister，您应该使用touchstart和/或click事件。您可以在香草中进行以下操作：

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

Answer 2

如果要限制默认功能，可以添加event.preventDefault（）;

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

Javascript检查是否单击了href

2 个答案: