一个诡异的问题,事件对象目标选择的问题
有个事很不解。我写了一个<div>盒子元素,又在<div>盒子内写了个<a>标签。我想通过a标签onclick点击事件来调用移动<div>盒子的函数代码。可是试了好多次都不成功。函数代码啥的都没问题,因为到最后我直接把onclick点击事件放在<div>上的时候(div.onclick=function(){移动div的代码}),盒子成功移动了,代码被完整执行。这是怎么回事啊,难道我要移动某个元素,就只能针对该元素添加一个事件?没这个道理啊
<script> var mymore=document.getElementById("more"); var box1 = document.getElementById("box1");var i=null; function startMove() {var box1 = document.getElementById("box1"); var i=setInterval(function(){box1.style.left=box1.offsetLeft+1+"px"},10) } </script> <body> <div id="wrap"> <div id="box1" onclick="startMove()"> <a type="button" id="more" href="" onclick="startMove()">查看更多</a> </div> </div> </body>
请忽略那个type=button。。。(我是实在没办了了随便试了试)
如上,div a 标签都加了onclick点击事件,然而,点a的时候毫无反应(a元素被我定位在了div的右侧外边界,而div被左移隐藏起来了,跟本节课程类似。)所以理所应当的做法是通过给a一个点击事件来移动div让div元素显示。可是毫无卵用。于是我让div元素右侧露出一点宽度然后给div也加了相同的onclick事件。于是就发现,点击a元素没有一点反应,但点击div却可以成功调用函数,实现移动效果。
后来我又给被调用的函数加了个alert弹窗。发现点击a的时候,alert弹窗成功出现(出现2次);点击div的时候,alet弹窗出现一次,然后还是能够成功移动。
所以我就搞不懂了。