老师 this和e.target

<!DOCTYPE HTML>
<html>

<head>
   <script type="text/javascript" src="./jquery.min.js"></script>
    <style type="text/css">
    #div1 {
        width: 198px;
        height: 150px;
        padding: 10px;
        border: 1px solid #aaaaaa;
        display: inline-block;

        margin: 100px
    }
    </style>
</head>

<body>
    <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
        <p>请把小飞机拖放到这里</p>
    </div>
    <img id="drag1" src="http://img1.sycdn.imooc.com/climg//5b9603390001ffe202000100.png" draggable="true" ondragstart="drag(event)" />
    <script type="text/javascript">
       var os;
       var drag=function(e){
           os=$(e.target);
           console.log(os);
       }
       var drop=function(e){
           console.log(e.target);
           $(e.target).append(os);
       }
       var allowDrop=function(e){
           e.preventDefault();
       }

       </script>
</body>

</html>

老师代码里e.target换成this就出错了是怎么回事

慕运维2135045 2018-11-06

源自：HTML5拖拽上传 4-4 编程练习

收起

1回答

好帮手慕星星回答被采纳获得+3积分 2018-11-07 09:42:12

经测试代码效果是正确的，没有问题。

如果把e.target更改为this，那么this的指向是不对的，如下：

这是this指向的是window对象，因为drag方法是全局函数，所以this指向的是window，如果想要指向图片，需要传参，如下：

在html中drag方法中多传入一个this参数，也就是把当前绑定的对象传入进去，在js中drag方法使用一个参数去接收即可。

自己修改测试下。祝学习愉快！

收起回答

慕运维2135045 提问者 #1

$("img")[0].ondragstart=function(e){ console.log(this); os=$(this); } 老师，改成用上面的方法绑定drag事件，就可以直接用this，这是this指向是当前绑定元素，所以对this到底指向什么还是有疑惑

2018-11-07 10:06:43
好帮手慕星星回复提问者慕运维2135045 #2

this指向的是调用事件的对象，是谁调用的事件，this就指向谁，但是在html中需要传入参数this。

2018-11-07 10:26:37