老师,请帮忙解答以下两个问题。

老师,请帮忙解答以下两个问题。

  1. e.target换成this为什么不可以,不都是指向调用事件的元素吗?

  2. 向我这样写,直接给container传id可以吗?

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>html5拖拽</title>

<style>
.container{
width:200px;
height: 200px;
background: yellow;
}
.aloha{
width:100px;
height: 100px;
background: pink;
}
</style>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
</head>
<body>
<div class="container" id='container' ondrop="drop(event)" ondragover="dragover(event)"></div>
<div class="aloha" id='aloha' draggable='true' ></div>

<script>

var drop=function(e){
e.preventDefault();


e.target.appendChild(document.getElementById("aloha"));
}
var dragover=function(e){
e.preventDefault();

}
</script>
</body>

</html>


正在回答

登陆购买课程后可参与讨论,去登陆

5回答

如果使用jquery是不需要设置this参数的,因为不绑定在标签中。和你上传的js代码一样,只使用e参数即可,如下:

http://img1.sycdn.imooc.com//climg/5c3c6e46000135c709760290.jpg

  • aleeeeex 提问者 #1
    明白了,谢谢老师,还有一个问题,为什么e参数就必须要传?
    2019-01-15 11:47:17
  • 好帮手慕星星 回复 提问者 aleeeeex #2
    也可以不传参数,就需要使用window下的event对象,也就是event.target.appendChild()。其实e参数就是event,传参数就是用参数,没有传参数就使用event。可以在‘小燕壮士’老师提供的课程中进行学习。
    2019-01-15 13:34:24
  • aleeeeex 提问者 回复 好帮手慕星星 #3
    明白,谢谢老师。
    2019-01-15 16:48:56
Miss路 2019-01-14 17:41:00

http://img1.sycdn.imooc.com//climg/5c3c590d0001021f07080253.jpg

这个课的这个小节:

http://img1.sycdn.imooc.com//climg/5c3c592a00010e9409930272.jpg

祝学习愉快!

  • 提问者 aleeeeex #1
    啊哈哈 老师我还没学到这个,不过还是谢谢老师。
    2019-01-14 17:53:19
好帮手慕星星 2019-01-14 17:36:29

ele自己定义的,但是位置上需要与传入的实参对应上:

http://img1.sycdn.imooc.com//climg/5c3c57e60001c00213370340.jpg

  • 提问者 aleeeeex #1
    那如果我是用jquery,直接就用$('.container').on('drop',function(){},那么里面的位置怎么定呀?
    2019-01-14 17:39:40
Miss路 2019-01-13 14:38:16

同学,你好。https://class.imooc.com/lesson/506#mid=11940 这一个小节有讲target。同学可以把even对象里面的属性再看一看。

如果帮助到了你,欢迎采纳!

祝学习愉快!

  • 提问者 aleeeeex #1
    老师,直接点就跳到了课程首页,看不到。
    2019-01-14 17:26:14
好帮手慕星星 2019-01-11 18:42:49

你好,

1、在标签中直接使用事件,需要传参数this来指向元素,否则this指向的就是window。在js事件中讲过这个哦,例如:

http://img1.sycdn.imooc.com//climg/5c38723d0001e96312850400.jpg

2、代码虽然实现了,但是其实是在知道id值的前提下进行获取追加的。这样虽然方便,但是要考虑到在不知道具体的内容前提下,还是建议按照老师的操作一步一步的去完成。

祝学习愉快!

  • 提问者 aleeeeex #1
    老师,具体在js的哪一节中讲过啊,我找不到..可以说说嘛,我去重新学习一下,在网上百度了一下还是不太明白。 还有一个问题是,为什么有时候传参数this,有时候又传ele?
    2019-01-12 09:39:10
  • 好帮手慕星星 回复 提问者 aleeeeex #2
    在HTML事件中讲解的:https://class.imooc.com/lesson/202#mid=3258。this可以作为实参传入,但是不能作为形参,也就是function()中的参数,所有使用了ele,这是自定义的,可以更换。
    2019-01-14 09:47:00
  • 提问者 aleeeeex #3
    就是说ele可以随便命名是吗?ele的位置有规定吗?可以这样写吗:function(ele,e){},把ele形参放到第一位。
    2019-01-14 17:24:46
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
组件化思想开发电商网页 18版
  • 参与学习           人
  • 提交作业       467    份
  • 解答问题       4826    个

本路径带你通过系统学习HTML5、JavaScript、jQuery的进阶知识,不仅如此,还会学习如何利用组件化的思想来开发网页,知识点+案例,使得所学可以更好的得到实践。

了解课程
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师