一个诡异的问题，事件对象目标选择的问题
煤桶骑士3913029
2017-03-05 16:05
有个事很不解。我写了一个<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弹窗出现一次，然后还是能够成功移动。
所以我就搞不懂了。
3回答
-
- 慕移动9181930
- 2022-03-27 19:32:35
-
- 夜莺z
- 2017-03-15 16:21:11
我试过了，可以啊
<style>
*{
margin:0;
padding:0;
}
#box1{
width: 200px;
height: 200px;
background: red;
position: relative;
left: 10px;
}
#more{
background: blue;
}
</style>
<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">
<a id="more" href="#" onclick="startMove()">查看更多</a>
</div>
</div>
</body> -
- 煤桶骑士3913029
- 2017-03-05 16:12:39
请忽略那个type=button。。。（我是实在没办了了随便试了试）
如上，div a 标签都加了onclick点击事件，然而，点a的时候毫无反应（a元素被我定位在了div的右侧外边界，而div被左移隐藏起来了，跟本节课程类似。）所以理所应当的做法是通过给a一个点击事件来移动div让div元素显示。可是毫无卵用。于是我让div元素右侧露出一点宽度然后给div也加了相同的onclick事件。于是就发现，点击a元素没有一点反应，但点击div却可以成功调用函数，实现移动效果。
后来我又给被调用的函数加了个alert弹窗。发现点击a的时候，alert弹窗成功出现（出现2次）；点击div的时候，alet弹窗出现一次，然后还是能够成功移动。
所以我就搞不懂了。
JS动画效果
113923 学习 · 1443 问题
相似问题