Prevent slick.js to open link onclick next

Question

I´m using slick.js slider in my angularJs web app. The plugin is working fine. I have the prev and next pagination buttons. All slick code is inside an anchor link to another page. When, I click in the prev or next button, the slick is sliding but the link is opened as well. So, I would like to prevent to open the link on buttons click that are styled over the link.

Please see simplified structure.

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

When the code is parsed, the buttons re created like: <button class="slick-next slick-arrow" aria-label="Next" type="button" style="display: inline-block;">Next</button>

As said, when I click in the button, the slider works but the link is opened as well.

Danziger · Accepted Answer · 2020-01-02T19:36:36.990

You might want to listen for click events on the <a> element and check if event.target.classList.contains('slick-arrow') is true and, in that case, call event.preventDefault() to prevent the link from opening.

In your template:

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

In your component:

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

Otherwise, you could also try moving the <a> inside slick, maybe replacing the <div class="item" ...> if that works for you:

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

I was working in something like your first approach, but it´s not working at the moment. As I´m in an AngularJS1.0.7 webapp, I think the component should be a directive? — Rober, Jan 02 '20 at 20:23
I think you can either use a directive and replace that `` with something custom such as `` and define `handleLinkClicked` in the `$scope` property of its controller or use a controller as `ng-controller="MyController"`. Check https://stackoverflow.com/questions/17457024/angular-ng-click-with-call-to-a-controller-function-not-working and https://stackoverflow.com/questions/40047752/how-can-i-use-ng-click-on-a-directive-with-isolate-scope. — Danziger, Jan 02 '20 at 20:35

Prevent slick.js to open link onclick next

1 Answers1