今天编写一段脚本代码,测试的时候,碰到这行代码,怎么也不能正确执行:
<script language="JavaScript">
function show(o){
alert(o.parentNode.id);//也可以用parentElement
}
</script>
<div id="a1"><a href="javascript:show(this);" mce_href="javascript:show(this);">文字文字文字</a></div>
本应弹出的值是 a1 ,但却是 undefined。
最后,我把代码改成onclick,才可以: <a href="#" οnclick="javascript:show(this);">
看来结论是:href 不能获取当前对象的引用,还是用onclick这样的事件靠谱些。
在 CSDN 上发帖询问,得到的解决方法有:
<script language="JavaScript">
function show() { // 这个函数没有设定参数
alert(document.activeElement.parentNode.id);
}
</script>
<div id="a1"><a href="javascript:show(this);">文字文字文字</a></div>
从名字就知道activeElement是什么作用了,这样子连 this 这个参数都可以省掉了。
另,如果改成:
<a href="#" οnclick="javascript:show(this);">
那么点击后,浏览器地址栏后面会多个#号,很不喜欢。可以采用下面的方法去除:
<a href="javascript:" οnclick="javascript:show(this);">
或者:
<a href="javascript:void(0)" οnclick="javascript:show(this);">
或者在onclick调用的函数里 return false; 就不会导航到 #锚点了,代码如下:
<script type="text/javascript">
function show(o) {
alert(o.parentNode.id);
return false;
}
</script>
<div id="a1"><a href="#" οnclick="return show(this);">文字文字文字</a></div>
<div id="a2"><a href="javascript:void(0);" οnclick="show(this);">文字文字文字</a></div>