多个有onclick事件的tag套在一起怎么click的时候只触发最顶层tag的事件?

vnvlyp 2013-06-17 07:50:05
RT,多个有onclick事件的tag套在一起怎么click的时候只触发最顶层tag的事件?
比如下面这个例子,点击内层tag时会同时触发两个事件,即会分别执行foo2和foo1。
但我需要点击内层tag时就只触发foo2,而不触发foo1怎么办?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
</head>
<body>
<div onclick="foo1()" style="width:600px;height:100px;background-color:#CCC;">
<div onclick="foo2()" style="width:100px;height:50px;background-color:#666;"></div>
</div>

<script>
function foo1()
{
alert("1");
}
function foo2()
{
alert("2");
}
</script>
</body>
</html>


我试了一下发现用stopPropagation()可以做到

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
</head>
<body>
<div onclick="foo1()" style="width:600px;height:100px;background-color:#CCC;">
<div id="innerTag" style="width:100px;height:50px;background-color:#666;"></div>
</div>

<script>
function foo1()
{
alert("1");
}

document.getElementById("innerTag").onclick=function(event) {
event.stopPropagation();
alert("2");
}
</script>
</body>
</html>

但问题是我不能这么写,因为我那些tag都没有id,也不好怎么编id,而且也太多,感觉一个一个这样添加事件效率会有问题。

所以问一下怎么直接写到tag的onclick属性里啊?
或者说有什么别的方法吗?
...全文
200 6 打赏 收藏 转发到动态 举报
AI 作业
写回复
用AI写文章
6 条回复
切换为时间正序
请发表友善的回复…
发表回复
vnvlyp 2013-07-04
  • 打赏
  • 举报
回复
刚发现这个问题很弱智。。 只要在内层事件处理函数中加入event.stopPropagation()就可以阻止事件继续传播了。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<title> New Document </title>
</head>
<body>
    <div onclick="foo1()" style="width:600px;height:100px;background-color:#CCC;">
        <div onclick="foo2()" style="width:100px;height:50px;background-color:#666;"></div>
    </div>
    <script>
		function foo1()
        {
            alert("1");
        }
        function foo2()
        {
            alert("2");
			event.stopPropagation();
        }
        </script>
    </body>
</html>
  • 打赏
  • 举报
回复
function foo2()
            {
                alert("2");
                return false;
            }
NANU-NANA 2013-06-17
  • 打赏
  • 举报
回复
加入event和element参数
function amIclicked(e, element)
{
    e = e || event;
    var target = e.target || e.srcElement;
    if(target.id==element.id)
        return true;
    else
        return false;
}
function oneClick(event, element)
{
    if(amIclicked(event, element))
    {
        alert('One is clicked');
    }
}
function twoClick(event, element)
{
    if(amIclicked(event, element))
    {
        alert('Two is clicked');
    }
}
vnvlyp 2013-06-17
  • 打赏
  • 举报
回复
引用 2 楼 jslang 的回复:
<div onclick="foo2();return false;" style="width:100px;height:50px;background-color:#666;"></div>
试了没有效果啊。。
天际的海浪 2013-06-17
  • 打赏
  • 举报
回复
<div onclick="foo2();return false;" style="width:100px;height:50px;background-color:#666;"></div>
原来缘来 2013-06-17
  • 打赏
  • 举报
回复
设计的有问题 不过还得提供解决方案 通过循环取得父节点,判断父节点是否的onclick是否为空 不为空执行父节点的onclick 直到父节点为body

87,996

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧