Skip to content

DOM2兼容处理顺序问题 #60

@Yangxiaqing

Description

@Yangxiaqing

重复问题:IE6~8可以给同一个元素的同一个行为绑定多个相同的方法

//->解决顺序问题:
//我们不用浏览器自带的事件池了,而是自己模拟标准浏览器的事件池实现

//->on:创建事件池,并且把需要给当前元素绑定的方法依次的添加到事件池中
function on(curEle, eventType, eventFn) {
	if (!curEle["myEvent" + eventType]) {
		curEle["myEvent" + eventType] = [];
	}
	var ary = curEle["myEvent" + eventType];
	for (var i = 0; i < ary.length; i++) {
		var cur = ary[i];
		if (cur === eventFn) {
			return;
		}
	}
	ary.push(eventFn);

	//->执行on的时候,我们给当前元素绑定了一个点击的行为,当点击的时候执行run方法;
	//  run方法中的this是当前元素curEle,并且浏览器给run传递了一个MouseEvent事件对象
	//curEle.addEventListener(eventType, run, false);
	bind(curEle, eventType, run);
}

//->off:在自己的事件池中把某一个方法移除
function off(curEle, eventType, eventFn) {
	var ary = curEle["myEvent" + eventType];
	for (var i = 0; i < ary.length; i++) {
		var cur = ary[i];
		if (cur === eventFn) {
			ary.splice(i, 1);
			break;
		}
	}
}

//->run:我们只给当前元素的点击行为绑定一个方法run,
//		当触发点击的时候执行的是run方法,我在run方法中根据自己存储的方法顺序分别的再把这些方法执行
function run(e) {

	e = e || window.event;
	var flag = e.target ? true : false;//->IE6~8下不兼容e.target,得到的flag为false
	if (!flag) {
		e.target = e.srcElement;
		e.pageX = e.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft);
		e.pageY = e.clientY + (document.documentElement.scrollTop || document.body.scrollTop);
		e.preventDefault = function () {
			e.returnValue = false;
		};
		e.stopPropagation = function () {
			e.cancelBubble = true;
		};
	}

	//->this:当前点击的这个元素curEle 
	//->e.target:存储的是当前触发的元素curEle

	//->获取自己事件池中绑定的那些方法,并且让这些方法依次的执行
	var ary = this["myEvent" + e.type];
	for (var i = 0; i < ary.length; i++) {
		var tempFn = ary[i];
		tempFn.call(this, e);
	}
}

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions