防止slick.js 打开link onclick next

Question

我在 angularJs 网络应用程序中使用 slick.js 滑块。该插件工作正常。我有上一个和下一个分页按钮。所有光滑的代码都在锚点 link 内到另一个页面。当我单击上一个或下一个按钮时，滑动条正在滑动，但 link 也被打开。因此，我想阻止在 link.

上单击样式的按钮打开 link

请查看简化结构。

<a ng-href="wherever" target="_blank">          
        <div class="photo-box">                         
              <div class="slick-container" slick>
                    <div class="item" ng-repeat="photo in item.photos">
                        <img ng-src="url-to-image" />                   
                    </div>
                </div>
        </div>
<a/>

解析代码后，重新创建的按钮如下：<button class="slick-next slick-arrow" aria-label="Next" type="button" style="display: inline-block;">Next</button>

如前所述，当我单击按钮时，滑块起作用，但 link 也打开了。

Answer 1

您可能想要监听 <a> 元素上的 click 事件并检查 event.target.classList.contains('slick-arrow') 是否为 true，如果是这样，请调用 event.preventDefault() 以防止 link 打开。

在您的模板中：

<a ng-href="wherever" target="_blank" (click)="handleLinkClicked($event)">          
  <div class="photo-box">                         
    <div class="slick-container" slick>
      <div class="item" ng-repeat="photo in item.photos">
        <img ng-src="url-to-image" />                   
      </div>
    </div>
  </div>
<a/>

在你的组件中：

handleLinkClicked(e: ClickEvent) {
    if (e.target.classList.contains('slick-arrow')) e.preventDefault();
}

否则，您也可以尝试将 <a> 移到 slick 中，如果适合您，也许可以替换 <div class="item" ...>：

<div class="photo-box">                         
  <div class="slick-container" slick>
    <a class="item" ng-href="wherever" target="_blank" ng-repeat="photo in item.photos">
      <img ng-src="url-to-image" />                   
    </a>
  </div>
</div>

防止slick.js 打开link onclick next

Prevent slick.js to open link onclick next

javascript

jquery

angularjs

slick.js