点击JavaScript添加的按钮也会点击它

Question

我正在处理一个脚本，该脚本会添加一个浮动在Facebook用户个人资料照片缩略图上的按钮。

这是一个截图：

单击此按钮可返回提示中正在查看的配置文件的Facebook ID。该部分工作正常（但您需要登录并查看除您之外的个人资料，否则将会缺少元素）。

截图：

但令我困扰的是，点击按钮，然后在提示中按取消或确定，点击实际上会通过按钮并点击个人资料图片缩略图本身。只需单击一下即可点击两个项目！

我们有什么方法可以让按钮本身下方的区域无法点击？但是个人资料图片的其余部分是？

我尝试过搜索这个主题但却找不到多少结果。即使我尝试搜索类似＆＃34;在按钮JavaScript＆＃34;下方/下方添加填充，我在按钮周围填充，而不是直接在它下面 从z轴的角度来看。

这里是脚本代码，您可以直接将其粘贴到控制台中。也就是说，如果您有一个Facebook帐户并且已登录。此外，这仅适用于您的个人资料（否则data-profileid将丢失）。

// 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);

哦，是的，我觉得发生这种情况的原因是因为我要附加一个锚链接。以防这个信息有用。

感谢任何帮助，谢谢！

Answer 1

试试这个

// 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是对单击按钮时引发的事件的回调。返回false将确保事件不会传播到其父级，因此不会引发父级事件或调用事件处理程序。

Answer 2

尝试阻止点击的默认操作，如下所示：

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

编辑：使用event.stopPropagation（）;

（与此线程How to stop event bubbling on checkbox click比较）