时间戳

首页 > 解决方案 > 防止 slick.js 打开链接 onclick next

javascript - 防止 slick.js 打开链接 onclick next

问题描述

我在我的 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>

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

标签： javascriptjqueryangularjsslick.js

解决方案

您可能想监听元素click上的事件并检查是否是，在这种情况下，调用以防止链接打开。<a>event.target.classList.contains('slick-arrow')trueevent.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>inside slick，也许替换<div class="item" ...>适合您的 if ：

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

推荐阅读