[Resolved] Not able to trigger click event on js-toolset-maps-distance-current-location

[Author]

Posts

[roulartaM]

I am not able to target the 'js-toolset-maps-distance-current-location ' button when it is clicked. Here's my VanillaJS code that should echo 'original button clicked' in the browser console when the button is clicked:

<script>
...
document.addEventListener('click', function(event){
// check some criteria that the target is the one you actually want
if(event.target.className === 'Filter-crosshairs fas fa-crosshairs'){
console.log('crosshairs button clicked');
}

if(event.target.className === 'js-toolset-maps-distance-current-location'){
console.log('original button clicked');
}

if(event.target.className === 'js-wpv-filter-trigger'){
console.log('type clicked');
}
});
...
</script>

This code works when the 'Filter-crosshairs fas fa-crosshairs' and the 'js-wpv-filter-trigger' elements are clicked. But it's realy not working with the 'js-toolset-maps-distance-current-location'-button. Very bizar, can't figure out why.

You can see the implementation of the script on the homepage of "hidden link".

Can you help me please?

[Christian Cox]

Hi, there is no JavaScript API for Views so I'm a bit limited in the type of support I can offer here. However, if you're adding an event listener to the document object but a click event isn't registered there when this particular descendent element is clicked, the click event is most likely being stopped from bubbling up somewhere along the way with a call to event.stopPropagation(). Some examples: https://stackoverflow.com/questions/5963669/whats-the-difference-between-event-stoppropagation-and-event-preventdefault

[roulartaM]

My issue is resolved now. I fixed the issue using jQuery instead of Vanilla JS. Bummer 🙂