多个有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属性里啊？
或者说有什么别的方法吗？

...全文

206 6 打赏收藏转发到动态举报

写回复

用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>

一天要饭生活又开始啦 2013-06-17

打赏
举报

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