In a Chrome extension, I am gathering all images in a list. Then I add a button on top of every image, that is done for every webpage. On some websites, images are sitting inside of the container which is clickable, so when I am clicking the button it clicks the container too. Preventing bubbling does not help... because the container is on top??? Here is an example of what I have tried:
$(img).wrap( '<div class="unblurButtonContainer"></div>')
$('<button/>')
.text('Btn')
.addClass('unblurBtn')
.css({'width': $(img).width(), 'height': $(img).height()})
.appendTo($(img).parent())
.click((event) => {
event.preventDefault()
event.stopPropagation()
console.log("btn pressed")
console.log(img)
})
The clickable element is one of the parent nodes of the image. Is there any way to prevent it from being clicked?
