this冲突问题

Hanger
  • 649
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对象

回复
阅读 3.1k
5 个回答

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

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

可以用ev.target吧。

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

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/

event.target.parent()
宣传栏