Rani Kheir Rani Kheir - 5 months ago 14
CSS Question

Clicking a button added by JavaScript clicks through it as well

I'm working on a script that adds a button that floats on top of a Facebook user's profile photo thumbnail.

Here's a screenshot:

Facebook thumbail button

This button, when clicked, returns the Facebook ID of the profile that is being viewed in a prompt. That part works fine (but you'd need to be logged in and looking at a profile besides yours, otherwise there'd be a missing element).

Screenshot:

prompt screenshot

What's bothering me though, is after clicking the button, and pressing Cancel or Okay in the prompt, the click actually goes through the button and clicks the profile picture thumbnail itself. A single click is clicking both items!

Is there any way we can make it so that the area below the button itself is not clickable? But the rest of the profile picture is?

I've tried searching on this topic but couldn't find much results. Even if I try to search for something like "Add padding below/under button JavaScript", I'm getting padding around the button, and not directly below it
in a z-axis point of view.

Here's the script code, you can copy paste it in the console directly. That is, if you have a Facebook account and are logged in. Also this only works on profiles besides yours (otherwise

data-profileid
would be missing).

// Create the button
var btn = document.createElement("BUTTON");
var t = document.createTextNode("FBID"); // To replace with icon
btn.appendChild(t);

// Add a listener
btn.addEventListener("click", getFBID);

// Styling (positioning)
btn.style.display="block";
btn.style.position="absolute";
btn.style.top="4px";
btn.style.right="4px";

// Function to get Facebook ID
function getFBID() {
prompt("Copy it:", document.querySelectorAll("[data-profileid]")[0].getAttribute("data-profileid"));
}

// Append button to profile picture
document.getElementsByClassName("profilePicThumb")[0].appendChild(btn);


Oh yeah, I feel the reason why this is happening is because I am appending to an anchor link. Just in case this info would be useful.

Any help appreciated, thank you!

Answer

Try to prevent the default actions for the click like this:

btn.addEventListener("click", function(event){
  event.preventDefault();
  event.stopPropagation();
  getFBID();
  return false;
});

EDIT: use event.stopPropagation();

(compare to this thread How to stop event bubbling on checkbox click)

Comments