JS阻止函数作为onclick事件运行

时间:2016-08-31 00:59:03

标签: javascript

我想禁用某个函数作为onclick事件运行。

<a href="#" onclick="myfunc1();myfunc2();"></a>

在这里,我想禁用myfunc1,而不是myfunc2。实际上我想从整个页面禁用myfunc1,但无论如何这是我唯一需要的东西。

我无法控制页面,我正在使用用户脚本或其他脚本注入工具来实现此目的。

我尝试了什么:

  1. 在页面加载后重新定义函数:我尝试使用function(){myfunc1 = function(){}将事件监听器添加到事件DOMContentLoaded; } 这似乎有效,但在具有快速互联网连接的快速计算机中,有时它在定义myfunc1之前运行(在同步加载的外部js文件中)。有没有什么办法可以保证在定义myfunc1之后执行该函数?

  2. 有什么办法可以'劫持'onclick事件来删除myfunc1的名字吗?

3 个答案:

答案 0 :(得分:2)

您应该使用事件侦听器,然后您可以使用removeEventListener删除一个。如果您无法更改HTML源代码,则需要使用像

这样的脏东西

function myfunc1() {
  console.log('myfunc1');
}
function myfunc2() {
  console.log('myfunc2');
}
var a = document.querySelector('a[onclick="myfunc1();myfunc2();"]');
a.setAttribute('onclick', 'myfunc2();');
<a href="#" onclick="myfunc1();myfunc2();">Click me</a>

或许您更喜欢劫持函数而不是事件处理程序:

function myfunc1() {
  console.log('myfunc1');
}
function myfunc2() {
  console.log('myfunc2');
}
var a = document.querySelector('a[onclick="myfunc1();myfunc2();"]');
var myfunc1_;
a.parentNode.addEventListener('click', function(e) { // Hijack
  if(a.contains(e.target)) {
    myfunc1_ = window.myfunc1;
    window.myfunc1 = function(){};
  }
}, true);
a.addEventListener('click', function(e) { // Restore
  window.myfunc1 = myfunc1_;
  myfunc1_ = undefined;
});
<a href="#" onclick="myfunc1();myfunc2();">Click me</a>

答案 1 :(得分:0)

另一种方法是使用Jquery并将anchor标签上的onlick propery设置为null。然后你可以附加一个只附带myfunc2()的点击功能。

$(document).ready(function () {
  $("a").prop("onclick", null);
  $("a").click(function(){
        myfunc2();
  });
});
function myfunc1() {
  console.log('1');
}
function myfunc2() {
  console.log('2');
}

<a class="test" href="#" onclick="myfunc1();myfunc2();">Example</a>

您可以在此处查看代码集 - http://codepen.io/anon/pen/BLBYpO

答案 2 :(得分:0)

也许你是jQuery。

$(document).ready(function(){
    var $btn = $('button[onclick*="funcOne()"]');

    $btn.each(function(){
        var newBtnClickAttr;
        var $this = $(this);
        var btnClickAttr = $this.attr("onclick");

        newBtnClickAttr = btnClickAttr.replace(/funcOne\(\)\;/g, "");

        $this.attr("onclick", newBtnClickAttr);
    });
});

变量$btn中的所有位置都包含一个包含funcOne()的onclick属性的按钮元素。

在您的情况下,这将是您要在属性上删除的功能,例如myfunc1();

现在您已经选择了具有该onclick功能的所有元素。 循环它们并获取当前属性值并通过将其替换为空字符串来删除函数名称。

现在您拥有的值不包含已替换的函数名称,现在可以使用onclick的值更新newBtnClickAttr属性值。

选中此Sample Fiddle