div设定onclick后,如何点其中的超链接不触发onclick

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了div设定onclick后,如何点其中的超链接不触发onclick相关的知识,希望对你有一定的参考价值。

我有个div 并设定onclik='alert()' 这个div中间有超链接<a href="#">sd</a>
问题是这样,如何能够在我点这个超链接的时候不触发这个onclick,但是在点除了这个超链接的其他空白处的时候都能触发这个属性?

这是事件冒泡导致的,请看demo。

HTML代码

<div id="box"><a href="#" class="link">TEST</a></div>

JS代码

document.getElementById(\'box\').onclick = function()
alert(\'box被点击了\');

document.getElementsByClassName(\'link\')[0].onclick = function()
alert(\'a被点击了\');

//div里点击会先后触发以上两个事件

div设定onclick后,点其中的超链接a会触发div的onclick事件!

原因:子元素事件冒泡到父节点上了。

解决办法:在子节点上阻止事件冒泡:

//如果想让a点击的时候不触发box的点击事件:
document.getElementsByClassName(\'link\')[0].onclick = function(e)
alert(\'a被点击了\');
e.stopPropagation();//阻止向上冒泡

这样,点击a标签只会提示“a被点击了”,并不会出现“box”被点击的提示。

参考技术A 在<a>上停止事件冒泡就可以了


<a href="#" onclick="event.stopPropagation()||(event.cancelBubble = true);">sd</a>

event.stopPropagation()是在firefox里停止事件向上一层发送
event.cancelBubble = true是在Ie里用的,不过firefox 3 以上也支持这个.本回答被提问者采纳

div-map-area的html中,如何写CSS能让鼠标滑过area的超链接时出现效果?

<div style="display:block;text-align:left">
<img border="0" src="#" usemap="#map1">

<map name="map1">
<area alt="a" coords="260,22,450,47" href="#" shape="rect" title="a">
<area alt="b" coords="470,19,659,46" href="#" shape="rect" title="b">
<area alt="c" coords="681,21,870,46" href="#" shape="rect" title="c">
</map>
</div>

这样的html,一个图片上用area框出了三个区域做超链接。
目前鼠标滑过只会变成一只手,网页样式没有变化,用户浏览网页的时候容易忽略这里的超链接。
有什么样的CSS(最好是嵌入式的),可以使鼠标滑过的时候此区域有强调效果(比如显示区域边框)

采纳有追加

参考技术A 热区是这样的, 如果要做成你的那种效果, 建议, 把热区的地方单独切出来, 然后定位到图上, 做成a的背景之类, 然后, a:hover的时候, 换背景或者加边框之类的, 更好操作一些追问

我做的这个网站是基于google sites做的,有一个流程图,每一个框都是一个链接。由于是google sites,所以如果把图片切开就不好排版了。只能完整的图片放上去然后用热区做超链接。我就想用嵌入式style让热区在hover或者onmouseover的时候显示出一点效果来,有办法吗?

参考技术B a:link color: #FF0000 /* 未访问的链接 */a:visited color: #00FF00 /* 已访问的链接 */a:hover color: #00FF00 /* 鼠标移动到链接上 */a:active color: #00FF00 /* 选定的链接 */ 参考技术C

首先没法写内联,看下面

area:hover 
    box-shadow: 10px 11px 15px #888888;

以上是关于div设定onclick后,如何点其中的超链接不触发onclick的主要内容,如果未能解决你的问题,请参考以下文章

如何将文本与其中的超链接居中对齐?

如果用jquery标签页的load方法做载入的页里面的超链接跳转后能否继续在这个div中显示跳转后的页面

如何在没有 id/name 的情况下生成指向页面上特定点的超链接?

div-map-area的html中,如何写CSS能让鼠标滑过area的超链接时出现效果?

ajax 响应未在单击的超链接的父 div 中呈现

使用 jquery 更改具有嵌套内容的 div 的可见性,onclick