Event - MooTools 中文文档

返回介绍

Event

发布于 2019-07-06 字数 4187 浏览 969 评论 0

Type: DOMEvent

MooTools的DOMEvent方法。

DOMEvent Method: constructor

语法:

new DOMEvent([event[, win]]);

参数:

  1. event – (event, required)HTMLEvent对象。
  2. win – (window, optional: defaults to window)事件的上下文。

属性:

  • page.x – (number)的鼠标的x位置,相对于全窗口。
  • page.y – (number)鼠标的y位置,相对于整个窗口。
  • client.x – (number)鼠标的x位置,相对于可视区域。
  • client.y – (number)鼠标的y位置,相对于可视区域。
  • rightClick – (boolean) True如果用户点击了鼠标右键.
  • wheel – (number)鼠标中轮滚动。
  • relatedTarget – (element)触发本事件的元素。
  • target – (element)事件绑定的元素。
  • code – (number)被按下的键的键码。
  • key – (string)被按下的键的名字。键可以是’enter’, ‘up’, ‘down’, ‘left’, ‘right’, ‘space’, ‘backspace’, ‘delete’, ‘esc’ 。
  • shift – (boolean) True如果用户按下shift键。
  • control – (boolean) True如果用户按下控制键。
  • alt – (boolean) True如果用户按下alt键。
  • meta – (boolean) True如果用户按下了Meta键。

示例:

$('myLink').addEvent('keydown', function(event){
    // the passed event parameter is already an instance of the Event type.
    alert(event.key);   // returns the lowercase letter pressed.
    alert(event.shift); // returns true if the key pressed is shift.
    if (event.key == 's' && event.control) alert('Document saved.'); //executes if the user presses Ctr+S.
});

DOMEvent Method: stop

停止事件的传播,执行preventDefault 。

语法:

myEvent.stop();

返回:

  • (object)原DOMEvent实例。

示例:

HTML :
<a id="myAnchor" target="_blank" class="external-link" href="http://google.com/">Visit Google.com</a>
JavaScript
$('myAnchor').addEvent('click', function(event){
    event.stop(); //Prevents the browser from following the link.
    this.set('text', 'Where do you think you\'re going?'); //'this' is Element that fires the Event.
    (function(){
        this.set('text', 'Instead visit the Blog.').set('href', 'http://blog.mootools.net');
    }).delay(500, this);
});

注意事项:

  • 返回false也可以阻止事件的传播。

DOMEvent Method: stopPropagation

跨浏览器的方法来阻止事件的传播(这将停止事件向上冒泡) 。

语法:

myEvent.stopPropagation();

返回:

  • (object)原DOMEvent对象。

示例:

“#myChild”与”myElement”覆盖不相同的面积。因此’click’父/子元素依赖点击的位置:

HTML:
<div id="myElement">
    <div id="myChild"></div>
</div>
JavaScript:
$('myElement').addEvent('click', function(){
    alert('click');
    return false; //equivalent to stopPropagation.
});
$('myChild').addEvent('click', function(event){
    event.stopPropagation(); //prevents the event from bubbling up, and fires the parent's click event.
});

DOMEvent Method: preventDefault

跨浏览器阻止浏览器的默认行为.

语法:

myEvent.preventDefault();

返回:

  • (object)原DOMEvent对象。

示例:

<form>
    <input id="myCheckbox" type="checkbox" />
</form>
JavaScript
$('myCheckbox').addEvent('click', function(event){
    event.preventDefault(); //prevents the checkbox from being "checked".
});

Function: DOMEvent.defineKey

此函数允许添加额外的事件识别码。

例如:

DOMEvent.defineKey(16, 'shift');
$('myInput').addEvent('keydown', function(event){
    if (event.key == 'shift') alert('You pressed shift.');
});

预定义项:

  • enter
  • up
  • down
  • left
  • right
  • esc
  • space
  • backspace
  • tab
  • delete

Function: DOMEvent.defineKeys

此函数允许添加多个额外的事件识别码。

例如:

DOMEvent.defineKeys({
    '16': 'shift',
    '17': 'control'
});
$('myInput').addEvent('keydown', function(event){
    if (event.key == 'control') alert('You pressed control.');
});

上一篇:Object

下一篇:Browser

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!