访问事件以从源于tag的onclick属性的自定义函数调用preventdefault


119

我有这样的链接:

<a href="#" onclick="myfunc({a:1, b:'hi'})" />click</a>
<a href="#" onclick="myfunc({a:3, b:'jo'})" />click</a>

而且我想做一个preventDefault()Inside myfunc(),因为#单击链接时,地址栏中会添加a (不做任何操作)return false;href='javascript:void(0);'

这可能吗?我可以把活动带进去吗myfunc()


6
return false有什么问题?
亚历克斯

5
它也停止传播
Omu

4
return false只停止在jQuery中传播。
cruzanmo 2014年

Answers:


157

我相信您可以传入event函数内联函数,该函数将成为eventW3C兼容浏览器中引发事件的对象(即,较旧版本的IE仍需要在事件处理函数中进行检测才能查看window.event)。

一个简单的例子

function sayHi(e) {
   e.preventDefault();
   alert("hi");
}
<a href="http://google.co.uk" onclick="sayHi(event);">Click to say Hi</a>

  1. 按原样运行,请注意,警报发出后,该链接不会重定向到Google。
  2. 然后,将event传递到onclick处理程序中的其他内容更改为e,单击运行,然后注意在警报之后确实发生了重定向(结果窗格变为白色,表明重定向)。

5
好的,我所要做的就是把我的参数放在第二位myfunc(event, {a:123, b:"asdas"})
Omu

1
@Omu传入的参数event可以在任何地方,不必是第一个,只要它在函数的已定义参数列表的正确位置即可。例如,function myfunc(o, e) {...}则可以称为myfunc({a:1, b:'hi'}, event)
cateyes 2014年

2
我认为您不必显式传递和捕获事件对象。您可以在函数中简单地引用它。有人可以确认吗?我的意思是,没有事件的这段代码也应该起作用:function sayHi() { event.preventDefault(); alert("hi"); }
K Vij

111

最简单的解决方案就是:

<a href="#" onclick="event.preventDefault(); myfunc({a:1, b:'hi'});" />click</a>

这实际上是对没有启用JS的浏览器进行回退的文档的缓存清除的好方法(如果没有JS,则没有缓存清除)

<a onclick="
if(event.preventDefault) event.preventDefault(); else event.returnValue = false;
window.location = 'http://www.domain.com/docs/thingy.pdf?cachebuster=' + 
Math.round(new Date().getTime() / 1000);" 
href="http://www.domain.com/docs/thingy.pdf">

如果启用了JavaScript,它将打开带有缓存清除查询字符串的PDF,否则将仅打开PDF。


如果只需要缓存清除,就可以使用服务器端技术来重新编写该链接。
mpen 2014年

这样做会更好,但是我无法访问服务器端代码。用我已有的工作。
JuLo 2014年

11

试试这个:

<script>
    $("a").click(function(event) {
        event.preventDefault(); 
    });
</script>

这需要为每个click事件添加<script>标记,从而使代码更加复杂。
somid3 2012年

它还需要jQuery,尽管可能存在jQuery,但这并不是先决条件。
不定期的棚2014年

在这里也不同意,对内联函数的简单解析会更有效且代码更少。
Shannon Hochkins 2014年

1
@ somid3,虽然不需要 jQuery ,但是如果您担心性能,则可以使用单个委托的事件处理程序,以便仅为页面上的所有锚点附加单个侦听器,如下所示:$("body").on("click","a",function(e) { e.preventDefault() });。无论哪种情况,这两种解决方案都不会对性能产生有意义的影响。
KyleMit


6

将唯一的类添加到链接中,并添加一个防止此类默认链接的JavaScript:

<a href="#" class="prevent-default" 
   onclick="$('.comment .hidden').toggle();">Show comments</a>

<script>
  $(document).ready(function(){

    $("a.prevent-default").click(function(event) {
         event.preventDefault(); 
          });
  });
</script>

有趣的全球解决方案。
AFract


4

我认为,当我们使用onClick时,我们想做一些不同于默认的事情。因此,对于所有与onClick的链接:

$("a[onClick]").on("click", function(e) {
  return e.preventDefault();
});


2

您可以像这样从onclick访问事件:

<button onclick="yourFunc(event);">go</button>

在您的javascript函数中,我的建议是将第一行语句添加为:

function yourFunc(e) {
    e = e ? e : event;
}

然后将e用作事件变量



0

没有任何JS库或jQuery。如果可能的话,打开一个漂亮的弹出窗口。安全地无法正常打开链接。

<a href="https://acme.com/" onclick="onclick="openNewWindow(event, this.href);">...</a>

和助手功能:

function openNewWindow(event, location) {
  if (event.preventDefault && event.stopImmediatePropagation) { 
    event.preventDefault(); 
    event.stopImmediatePropagation(); 
  } else {
    event.returnValue = false; 
  }
  window.open(location, 'targetWindow', 'toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=yes,width=800,height=450');
}
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.