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代码如下：

另外我用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)就可以了