Clicking a button added by JavaScript clicks through it as well

Question

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:

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:

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!

put a z-index on the button, which is higher than the profile pic — omarjmh, Jun 07 '16 at 13:41
have had a look at `preventDefault` and `stopPropagation` methods of javascript event handlers? — Akshay Khandelwal, Jun 07 '16 at 13:42
@JordanHendrix, tried that earlier even though I feel that's more for positioning, didn't do anything unfortunately. — Rani Kheir, Jun 07 '16 at 13:48
@AkshayKhandelwal, tried prevenDefault, but haven't tried stopPropagation, will try that now, thanks! — Rani Kheir, Jun 07 '16 at 13:48

Akshay Khandelwal · Answer 1 · 2016-06-07T16:34:16.847

1

Try this

// 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"));
    return false;                   // Try returning false here..
}

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

getFBID in this case is a callback for the event that is raised on the click of the button. returning false will make sure that the event is not propagated to its parent and hence will not raise the parent's event or call the eventhandler.

edited Jun 07 '16 at 16:34

answered Jun 07 '16 at 13:44

Akshay Khandelwal

1,570
11
19

Correct (so up-voted), but an explanation would be nice too :) – Reinstate Monica Cellio Jun 07 '16 at 13:47
@Archer, unfortunately, it hasn't fixed it for me. – Rani Kheir Jun 07 '16 at 13:54
In order to further help, I'd need to see the HTML as well. Always remember that HTML and Javascript always go hand in hand so never post Javascript alone and expect a working solution – Akshay Khandelwal Jun 07 '16 at 16:35

score 1 · Accepted Answer · edited May 23 '17 at 12:31

1

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)

edited May 23 '17 at 12:31

Community

1
1

answered Jun 07 '16 at 13:49

user3637541

675
4
15

That worked! I've tried both preventDefault and stopPropagation, but never tried them both together and that did it! Thanks :) – Rani Kheir Jun 07 '16 at 14:06
@user3637541: Well according to the standards, **returning false will eventually stop propagation and prevent default** I guess so **what's the point** of writing it again? (although not sure if all the browsers follow those standards) – Akshay Khandelwal Jun 07 '16 at 16:39
1

@AkshayKhandelwal: According to [this answer](http://stackoverflow.com/a/1357151/3882583) the `return false` stops bubbling when it's within a jQuery event handler. Guess it's different with me since I'm just using plain JavaScript. – Rani Kheir Jun 09 '16 at 01:16

Clicking a button added by JavaScript clicks through it as well

2 Answers2