防止 slick.js 打开链接 onclick next

Question

我在我的 angularJs 网络应用程序中使用 slick.js 滑块。该插件工作正常。我有上一个和下一个分页按钮。所有光滑的代码都在指向另一个页面的锚链接中。当我单击上一个或下一个按钮时，光滑的东西在滑动，但链接也打开了。所以，我想阻止在链接上设置样式的按钮单击时打开链接。

请参见简化结构。

<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>

如前所述，当我单击按钮时，滑块可以工作，但链接也会打开。

Answer 1

您可能希望在 <a> 元素上侦听 click 事件并检查 event.target.classList.contains('slick-arrow') 是否为 true，在这种情况下，请调用 event.preventDefault() 以阻止链接打开。

在您的模板中：

<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>