Javascript 检查是否点击了 href

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

就像提到的thedivmeister一样，你应该使用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");
});