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

我正在编写一个脚本，在Facebook用户的个人资料照片缩略图上添加一个浮动按钮

以下是一个屏幕截图：

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

截图：

但让我困扰的是，在点击按钮，并在提示中按Cancel或Okay之后，点击实际上会穿过按钮并点击配置文件图片缩略图本身。单击一次即单击两个项目

我们有没有办法使按钮下方的区域无法点击？但是个人资料图片的其余部分是？

我试着搜索这个主题，但没有找到多少结果。即使我尝试搜索类似“在按钮JavaScript下方/下方添加填充”，我也会在按钮周围获得填充，而不是直接在按钮下方 从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"));
    return false;                   // Try returning false here..
}

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

getFBID

在本例中，是对单击按钮引发的事件的回调。返回

false

将确保事件不会传播到其父级，因此不会引发父级事件或调用eventhandler。

尝试此操作

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

将确保事件不会传播到其父级，因此不会引发父级的事件或调用eventhandler。

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

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

编辑：使用event.stopPropagation（）

---

（与此线程比较）

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

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

编辑：使用event.stopPropagation（）

---

---

（与此线程相比）

在按钮上放置一个z索引，该索引高于配置文件pichave查看了javascript事件处理程序的

preventDefault

和

stopPropagation

方法？@JordanHendrix，之前尝试过，尽管我觉得这更适合定位，但不幸的是没有做任何事情。@AkshayKhandelwal，尝试了prevenDefault，但还没有尝试停止播放，现在将尝试，谢谢@AkshayKhandelwal，stopPropagation让情况变得更糟Hahap在按钮上添加了一个z索引，它高于配置文件pichave查看了javascript事件处理程序的

preventDefault

和

stopPropagation

方法？@JordanHendrix早些时候尝试过，尽管我觉得这更适合定位，没有做任何不幸的事。@AkshayKhandelwal，尝试过prevenDefault，但还没有尝试过stopPropagation，现在将尝试，谢谢@AkshayKhandelwal，stopPropagation让情况变得更糟了hahaCorrect（投票结果是正确的），但是一个解释也会很好：）@Archer，不幸的是，它没有为我修复它。为了进一步提供帮助，我还需要查看HTML。永远记住HTML和Javascript总是齐头并进的，所以永远不要单独发布Javascript，并期待一个有效的解决方案。正确（投票结果如此之高），但一个解释也很好：）@Archer，不幸的是，它没有为我修复它。为了进一步的帮助，我还需要查看HTML。永远记住，HTML和Javascript总是携手共进，所以不要单独发布Javascript，期待一个有效的解决方案！我尝试过preventDefault和StopperPogation，但从未同时尝试过这两种方法，成功了！谢谢：）@user3637541：根据标准，返回false最终将停止传播并防止默认值，我想再次编写它有什么意义？（尽管不确定是否所有浏览器都遵循这些标准）@AkshayKhandelwal:根据

返回false

在jQuery事件处理程序中停止冒泡。我想这和我不一样，因为我只使用纯JavaScript。这很有效！我尝试过preventDefault和StopperPogation，但从未同时尝试过这两种方法，成功了！谢谢：）@user3637541：根据标准，返回false最终将停止传播并防止默认值，我想再次编写它有什么意义？（尽管不确定是否所有浏览器都遵循这些标准）@AkshayKhandelwal:根据

返回false

在jQuery事件处理程序中停止冒泡。我想这和我不一样，因为我只使用纯JavaScript。