Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Click event prevented

See original GitHub issue

Hi,

I have grid items ( cards ) that can be dragged and dropped on a grid by a handle (card’s illustration).
When the user clicks the illustration instead of dragging it, i want to perform an action.

But the click events are “canceled” when it occurs on an element that is a “handle” for drag and drop.

In the example below, “awesomeStuff()” ever happens :

<div ...gridConfiguration>
    <div *ngFor="#item of items"
             [ngGridItem]="item.config"
             (click)="awesomeStuff()"
             (onDragStop)="onChange($event, item)">
        <img ... (click)="awesomeStuff()"/>
    </div>
</div>

Any idea on how to make this work ?

Thanks,

Issue Analytics

State:
Created 7 years ago
Comments:6 (5 by maintainers)

Top GitHub Comments

1reaction

wuhkuhcommented, Jul 20, 2016

I fixed it! Incoming solution.

1reaction

BTMortoncommented, May 21, 2016

Hmmm, I’ve tried this on my setup and it seems to work fine, with a simple example. Can you demonstrate it with a plunkr so I can try to investigate?

Top Results From Across the Web

Event.preventDefault() - Web APIs | MDN

The preventDefault() method of the Event interface tells the user agent that if the event does not get explicitly handled, its default ...

preventDefault() Event Method - W3Schools

Clicking on a "Submit" button, prevent it from submitting a form; Clicking on a link, prevent the link from following the URL. Note:...

Prevent click event jquery - Stack Overflow

The function event.StopPropagation will do that. PreventDefault stops the default action of the link. Return false actually does both so using ...

What is event.preventDefault() in JavaScript? - Educative.io

The following code stops a checkbox from executing its default action by using the preventDefault() method. ... Some event actions cannot be prevented...

event.stopPropagation() | jQuery API Documentation

Description: Prevents the event from bubbling up the DOM tree, preventing any parent handlers from being notified of the event.