如何禁用子元素的鼠标事件产生

<html>
<head>
<script>
function TheMouseDown(e){
  alert(e.srcElement.parentNode.id);
}
-->
</script>
</head>
<body >
<div id="Div1" style= "POSITION: absolute; Z-INDEX: 101;WIDTH: 572px; HEIGHT: 424px;border: 1px solid black " onmousedown="TheMouseDown(event)" >
<div id="Div2" style= "POSITION: absolute; Z-INDEX: 100;WIDTH: 572px; HEIGHT: 424px" >
</div>
</div>
</body>
</html>

解决方案 »

  1.   

    <html>
    <head>
    <script>
    function TheMouseDown(obj){
      alert(obj.id);
    }
    -->
    </script>
    </head>
    <body >
    <div id="Div1" style= "POSITION: absolute; Z-INDEX: 101;WIDTH: 572px; HEIGHT: 424px;border: 1px solid black " onmousedown="TheMouseDown(this)" >
    <div id="Div2" style= "POSITION: absolute; Z-INDEX: 100;WIDTH: 572px; HEIGHT: 424px" >
    </div>
    </div>
    </body>
    </html>
      

  2.   

    谢谢两位的回复，2楼的没明白我的意思，我是想禁止子元素事件发生而不是得到父元素的id，用alert只是为了测试。可是我还希望在鼠标按下时得到e.offsetX 和e.offsetY，如果传的是this就没办法得到了，请指教。
      

  3.   

    禁止事件冒泡。<html>
    <head>
    <script>
    function TheMouseDown(e){
      alert(e.srcElement.id);
    }
    -->
    </script>
    </head>
    <body >
    <h1>分别点div1和div2</h1>
    <div id="Div1" style= "POSITION: absolute; Z-INDEX: 101;WIDTH: 572px; HEIGHT: 424px;border: 1px solid black " onmousedown="TheMouseDown(event)" >
    div1
    <div id="Div2" style= "POSITION: absolute; Z-INDEX: 100;WIDTH: 572px; HEIGHT: 424px" onmousedown="window.event.cancelBubble=true;">
    div2
    </div>
    </div>
    </body>
    </html>
      

  4.   

    谢谢楼上的。我试了一下，发现用了cancelBubble后，div1的事件也没发生。不知是什么原因。
      

  5.   

    发现用了cancelBubble后，div1的事件也没发生。不知是什么原因。
    那是你没放到div1上
      

  6.   

    可是我希望在div1的区域的任意位置中按下鼠标时获得坐标信息，如e.offsetX等，而且在我的div中不能有文字，这又怎样办到呢？
      

  7.   

    <html>
    <head>
    <script>
    function TheMouseDown(obj){
      alert("event.offsetX:"+event.offsetX+"\n\r"+"event.offsetY:"+event.offsetY+"\n\r"+"obj.offsetWidth:"+obj.offsetWidth+"\n\r"+"obj.offsetHeight:"+obj.offsetHeight+"\n\r"+"event.x:"+event.x+"\n\r"+"event.y:"+event.y);
    }
    -->
    </script>
    </head>
    <body >
    <h1></h1>
    <div id="Div1" style= "POSITION: absolute; Z-INDEX: 101; WIDTH: 572px; HEIGHT: 424px; border: 1px solid black; left: 84px; top: 55px;" onclick="TheMouseDown(this)" >
    <div id="Div2" style= "POSITION: absolute; Z-INDEX: 100; WIDTH: 572px; HEIGHT: 424px;"></div>
    </div>
    </body>
    </html>
    不知道你要表达的什么意思,但是我觉得如果仅仅是要取得坐标或者类似的操作的话，这样完全够了。
      

  8.   

    问题前部分描述清楚，你所求的不太明白：只能推测---换种方式吧；
    <html>
    <head>
    <script>
    <!--
    function TheMouseDown(obj){
    alert(obj.id);
    obj.style.border = "8px solid #33FF00";
    }
    -->
    </script>
    </head>
    <body >
    <div id="Div1" style= "POSITION: absolute;Z-INDEX:101;WIDTH:572px;HEIGHT: 424px;border: 1px solid black " onmousedown="TheMouseDown(this)" >
    <div id="Div2" style= "POSITION:absolute;Z-INDEX:100;WIDTH:500px;HEIGHT:424px;border: 5px solid red;">
    </div>
    </div>
    </body>
    </html>
      

  9.   

    /**
    可是我希望在div1的区域的任意位置中按下鼠标时获得坐标信息，如e.offsetX等，而且在我的div中不能有文字，这又怎样办到呢？
    */直接在函数里event.offsetX等;
    如果不可以,就间接去操作父元素,类似于一楼的--取得父元素后,再进行操作;
    还有你的父子元素的层设置是不是有些矛盾了--这可能也不能满足你的需求;