this冲突问题

Question

Jigsaw.prototype.down = function(ev) {
    ev.preventDefault();
    var oEvent = this.isTouch(ev);
    this.flag = true
    
    this.oDiv = $(this);//问题所在
    
    this.oDiv.css('zIndex', 1)
    var oDivOffsetleft = this.oDiv.offset().left;
    var oDivOffsettop = this.oDiv.offset().top;
    this.boxX = oEvent.clientX - oDivOffsetleft; // 鼠标到被选div的横距离
    this.boxY = oEvent.clientY - oDivOffsettop; // 鼠标到被选div的纵距离
    this.oriboxLeft = this.oDiv.position().left
    this.oriboxTop = this.oDiv.position().top
};


在Jigsaw构造函数的原型上，建立一个鼠标按下事件程序，$(this)中的this应该指向的是被操作的div元素，然而this冲突了，请问如何修改这种情况？

我尝试用ev.target,但是显示的是img元素,本意是想操作div.box的,html代码如下：

<div id="parent">
    <div class="box"><img src="" alt=""></div>
    <div class="box"><img src="" alt=""></div>
    <div class="box"><img src="" alt=""></div>
    <div class="box"><img src="" alt=""></div>
    <div class="box"><img src="" alt=""></div>
    <div class="box"><img src="" alt=""></div>
    <div class="box"><img src="" alt=""></div>
    <div class="box"><img src="" alt=""></div>
    <div class="box"><img src="" alt=""></div>
</div>

另外我用jquery，所以希望最后取到div.box的jq对象

Answer 1

this冲突的原因就是点击事件的监听函数this.down执行的时候，函数中的this被改写为DOM对象了，这样本来属于原型对象的this就失效了，解决的方法是在执行this.down的时候绑定原型的作用域，也就是使用this.down.bind(this),这样监听函数里面的this就是原型本身了，但是我们可能还要使用DOM本身的对象，那就可以使用event.target，这个就是被点击对象本身了，如果使用jquery直接$(event.target)就可以了

Answer 2

这里的this指向的是Jigsaw实例，不是被操作的元素

Answer 3

可以用ev.target吧。

Answer 4

可不可以这样, 把需要绑事件的节点传进构造函数

function Jigsaw( obj ){
    this.oDiv = obj;
    this.oDiv.onclick = this.down.bind( this);
}

Jigsaw.prototype.down = function(ev){
    console.log( this );
    console.log( ev );
}

var box = document.querySelector( '.box' );
var jig = new Jigsaw(box);

https://jsfiddle.net/vjmbo0b4/

Answer 5

event.target.parent()