Javascript 如何清除在Chrome中设置为setAttribute（'；onclick'；，'；window.open（）'；）的属性？

我有一个Chrome扩展，可以在页面上创建一个div。稍后，将更新此div，以打开一个新选项卡：

var div = document.getElementById("MyReport");
div.setAttribute('onclick', "window.open('" + results.productUrl + "')");

链接可以更新几次。每次更新时，上一次的

onclick

操作将保持不变。我似乎无法清除前面的

onclick

。我试过：

var div = document.getElementById("MyReport");
div.removeAttribute('onclick');
div.setAttribute('onclick', "window.open('" + results.productUrl + "')");

但每次更新时，它仍然会打开我关联的每个链接。因此，当用户最后单击div时，它会打开10-20个选项卡，而不仅仅是最近的链接

我希望setAttribute只会覆盖上一个值，但removeAttribute似乎也不起作用。当我“检查”页面时，仍然只有一个名为“MyReport”的div，它只有一个“onclick”

完整示例（Chrome扩展）

要使用，请将manifest.json和amazon.user.js放在一个目录中。然后在Chrome设置下，启用“开发者模式”。单击“加载解包扩展名”并导航到保存文件的文件夹

manifest.json：

{
  "name": "AmazonLink",
  "version": "0.001",
  "manifest_version": 2,
  "description": "Adds link to Amazon page",
  "icons": {
  },
  "content_scripts": [
    {
      "matches": [
        "https://www.amazon.com/*"
        ],
      "js": ["amazon.user.js"]
    }
  ]
}

amazon.user.js：

function addAmazonLink() {
    // Page example: Baby K'tan Original Baby Carrier amazon.com/dp/B00FSKX266
    var element = document.getElementById('price_feature_div');
    var siblingToPlaceBefore = element.firstChild;
    if (element == null || siblingToPlaceBefore == null) return false;
    var fsDiv = document.createElement('div');
    fsDiv.setAttribute('style', 'text-decoration: none; text-align: center; border-radius: 5px;  position: relative; margin-bottom: 4px;padding:4px;max-width:270px');
    element.insertBefore(fsDiv, siblingToPlaceBefore);
    fsDiv.setAttribute('id', "MyLinkDiv");
    var txt = document.createTextNode("Click Me!");
    fsDiv.appendChild(txt);
    UpdateLink();
    return true;

}

function UpdateLink(num){
    var strLink = encodeURI("https://www.google.com?q=" + num);

    var div = document.getElementById("MyLinkDiv");
    if (div == null) {
        return;
    }

    div.removeAttribute('onclick'); // This shouldn't matter
    div.setAttribute('onclick', "window.open('" + strLink + "')");

    return true;
}

addAmazonLink();
setTimeout(function() {
    UpdateLink(1);
}, 500);
setTimeout(function() {
    UpdateLink(2);
}, 1500);
setTimeout(function() {
    UpdateLink(3);
}, 2500);
setTimeout(function() {
    UpdateLink(4);
}, 3500);

---

导航到后，您将在“添加到购物车”按钮上方看到“单击我！”。等待几秒钟，然后单击它。将打开几个Google页面，而不仅仅是预期的1个。请注意，Amazon上的不同产品使用不同的CSS类/ID，因此，虽然该示例将在上面的B00FSKX266产品上运行，但它可能不会在其他Amazon产品页面上运行

您的代码不起作用的原因是，您在页面加载时向

div

添加了一个属性

div.setAttribute('onclick', "window.open('" + results.productUrl + "')");

它基本上转化为

因此，解决方案是在单击事件时添加

window.open（url）

var div = document.getElementById("MyReport");
var results = {productUrl: 'http://stackoverflow.com'};
div.addEventListener('click', function() {

    // Generating random url for demo 
    // "?test=" + Math.floor(Math.random() * 10000 + 1)
    // Write your logic to add url

    url = results.productUrl + "?test=" + Math.floor(Math.random() * 10000 + 1);
    window.open( url );
});

---

您所描述的不仅仅是这些信息（），所以一定有您意外遗漏的内容。请使用堆栈片段（

[]

工具栏按钮）在问题中添加一个，演示问题（至少对于我们使用Chrome的人来说），这样我们可以帮助您。不要使用

setAttribute

添加事件处理程序，请使用

addEventListener

。“因此，当用户最终单击div时，它会打开10-20个选项卡，而不仅仅是最近的链接。”无法重现。我已经用一个完整的示例更新了这个问题。只需将这两个文件放入一个目录中（如所述）并导航到上面提到的亚马逊产品页面。我在55.0.2883.87 m。奇怪的是，它对我们的行为有所不同。我已经在提交了一张罚单，该代码可能会解决这个问题，如何以及为什么解决这个问题会真正有助于提高您的帖子的质量。请记住，您将在将来为读者回答这个问题，不仅仅是现在提问的人！请编辑您的答案以添加解释，并指出适用的限制和假设。嘿，谢谢Rajender！我仍然不知道为什么chrome会看到一个“onclick”，但会打开10-20个选项卡。但是改为使用事件侦听器效果很好！