嵌套的元素的点击事件

下面的代码在tit1-1和tit1-2上点击时也会弹出对话框显示"tit1",有没有办法只在tit-1上点击上才alert?
<ul>
<li onclick="alert('tit1')">
tit1
<ul>
<li>tit1-1</li>
<li>tit1-2</li>
</ul>
</li>
</ul>

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

最简单的方法单独加个标签<ul>
<li>
    <span onclick="alert('tit1')">tit1</span>
    <ul>
      <li>tit1-1</li>
      <li>tit1-2</li>
    </ul>
</li>
</ul>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script type="text/javascript">
function ss(e){
var a=e||window.event;
var src=a.srcElement||a.target;
if(src.innerHTML==document.getElementsByTagName("li")[0].innerHTML){
alert("1");
}
}
window.onload=function(){
document.getElementsByTagName("li")[0].onclick=ss;
}
</script>
</head><body>
<ul>
<li>
    tit1
    <ul>
      <li>tit1-1</li>
      <li>tit1-2</li>
    </ul>
</li>
</ul>
</body>
</html>
这样试试
<ul>
<li onclick="if(this==event.srcElement) alert('tit1')">
tit1
<ul>
  <li>tit1-1</li>
  <li>tit1-2</li>
</ul>
</li>
</ul>
<ul>
<li onclick="alert('tit1')">
    tit1
    <ul onclick="event.stopPropagation?event.stopPropagation():event.cancelBubble=true">
      <li>tit1-1</li>
      <li>tit1-2</li>
    </ul>
</li>
</ul>阻止冒泡
可行能解释一下
var a=e||window.event;
var src=a.srcElement||a.target;
是什么意思吗？
我改了一下为什么就不行了？<script src="jquery-1.4.2.min.js"></script>
<script>
$(function(){
$("#ul1").click(
event.stopPropagation?event.stopPropagation():event.cancelBubble=true
})
})
</script><ul>
<li onclick="alert('tit1')">
    tit1
    <ul id="ul1">
      <li>tit1-1</li>
      <li>tit1-2</li>
    </ul>
</li>
</ul>
<ul>
    <li onclick="alert('tit1')">
        tit1
        <ul onclick="window.event?event.cancelBubble=true:event.stopPropagation()">
            <li>tit1-1</li>
            <li>tit1-2</li>
        </ul>
    </li>
</ul>
//说白了就是禁止冒泡
jquery就不用判断是否ie了，直接调用stopPropagation，你的代码结构有问题    $(function () {
        $("#ul1").click(function (e) {
            e.stopPropagation();
        });
    });
这样改也不行：
<script src="jquery-1.4.2.min.js"></script>
<script>
$(function(){
$("#ul1").click(
function(event){
event.stopPropagation?event.stopPropagation():event.cancelBubble=true
}

})
})
</script><ul>
<li onclick="alert('tit1')">
    tit1
    <ul id="ul1">
      <li>tit1-1</li>
      <li>tit1-2</li>
    </ul>
</li>
</ul>
<script>
$(function(){
    $("#ul1").click(function(event){
        event.stopPropagation?event.stopPropagation():event.cancelBubble=true
    })
})
</script>
仔细点吧