mootools_在MooTools中添加事件到添加事件

mootools

Note: This post has been updated.

注意：此帖子已更新。

One of my huge web peeves is when an element has click events attached to it but the element doesn't sport the "pointer" cursor. I mean how the hell is the user supposed to know they can/should click on something? It's insane. I've called Chris Coyier out on it, fellow developers out on it, and hell -- I'd call my mother out on it if I had to.

我最大的烦恼之一是当一个元素具有附加的单击事件，但该元素没有显示“指针”光标时。 我的意思是用户应该怎么知道他们可以/应该点击某些东西？ 太疯狂了 我已经叫Chris Coyier了，其他开发人员也叫了，地狱-如果需要的话，我会叫我妈妈的。

I set out to find a method to automatically give the pointer cursor to elements that get a "click" event attached to them. Essentially, I wanted to add an event to adding an event. Fortunately MooTools makes this possible.

我着手寻找一种方法，将指针光标自动赋予附加了“ click”事件的元素。 本质上，我想在添加事件中添加事件。 幸运的是，MooTools使这一切成为可能。

View Demo 观看演示

MooTools JavaScript (The MooTools JavaScript)

/* update cursor on add/remove click event */
Element.Events.click = { 
	base:'click',
	onAdd: function() {
		this.setStyle('cursor','pointer');
	},
	onRemove: function() {
		this.setStyle('cursor','');
	}
};
/* usage */
window.addEvent('domready',function() {
	$('click-me').addEvent('click',function() {
		/* execute whatever you want, but the pointer cursor is added */
	});
	$('click-me').removeEvents('click'); // cursor gone
});

I create a custom click event, based on the click event, and add the "pointer" cursor when the click event is added and then I remove that cursor when the click event is removed. So simple!

我基于click事件创建一个自定义click事件，并在添加click事件时添加“指针”光标，然后在删除click事件时删除该光标。 很简单！

View Demo 观看演示

Now if only I could get browser vendors to implement this...Oh well -- one step at a time!

现在，只要我能让浏览器供应商来实现这一目标...哦，一次就一步！

更新的MooTools JavaScript (The Updated MooTools JavaScript)

/* update cursor on add/remove click event */
Element.Events.click = { 
	base:'click',
	onAdd: function() {
		if(this.setStyle) {
			this.store('original-cursor',this.getStyle('cursor'));
			this.setStyle('cursor','pointer');
		}
	},
	onRemove: function() {
		if(this.setStyle) {
			this.setStyle('cursor',this.retrieve('original-cursor'));
		}
	}
};

This updated version takes into account the element's original cursor.

此更新版本考虑了元素的原始光标。

翻译自: https://davidwalsh.name/mootools-add-event

mootools