jquery ui如何禁用默认事件并定义定制事件?

How jquery ui disable default events and define custom events? (like disable tab click event and define custom tabselect event)

jquery ui如何禁用默认事件并定义自定义事件?(比如禁用标签点击事件和定义定制选项卡事件)

1. Where can i read about that deeply?
2. 我在哪里可以深入地读到?
3. Can you give places in jquery ui code that it happen
4. 你能用jquery ui代码给出它发生的位置吗
5. Can you give simple example to explain how its happen
6. 你能举个简单的例子来解释它是如何发生的吗?

3 个解决方案

#1

Your question is a little vague, but I think you're asking how jQuery implements preventDefault and sending custom events. That's what I'll answer.

您的问题有点含糊，但我认为您是在问jQuery如何实现preventDefault并发送自定义事件。这就是我的答案。

Preventing the Default Action and Propagation

I think what you mean when you talk about disabling default events is preventing a standard event's default action. There's no way to prevent a standard event from firing at all. However, for most events listeners can prevent the browser from taking the default action for that event. Default actions are things like following links or opening context menus. It's also possible for a handler to stop the event from propagating further, which will prevent listeners registered on ancestors of the element it was registered on from being called. As with most things JavaScript, there are two ways to do things: the W3C standard way and Microsoft's way.

我认为当您谈到禁用默认事件时，您的意思是阻止标准事件的默认动作。根本没有办法阻止标准事件的发生。但是，对于大多数事件，监听器可以阻止浏览器对该事件执行默认操作。默认操作类似于以下链接或打开上下文菜单。处理程序也可以阻止事件进一步传播，这将阻止对它注册的元素的祖先注册的侦听器被调用。和大多数JavaScript一样，有两种方法可以实现:W3C标准方法和微软的方法。

The standard way of handling events in JavaScript is defined in W3C's DOM Level 2 Events and, later, DOM Level 3 Events specifications. You attach an event listener to an element with its addEventListener method. When the event is fired your listener function will be called and passed an event object. You can prevent the default action by calling the event's preventDefault method and stop it from propagating by calling its stopPropagation method.

在JavaScript中处理事件的标准方法是在W3C的DOM Level 2事件和稍后的DOM Level 3事件规范中定义的。您可以使用addEventListener方法将事件侦听器附加到一个元素。当触发事件时，侦听器函数将被调用并传递一个事件对象。您可以通过调用事件的preventDefault方法来防止默认操作，并通过调用事件的stopPropagation方法来停止它的传播。

Versions of Internet Explorer before 9 don't support the W3C event system. You attach an event listener to an element with its attachEvent method. When the event is fired your listener function can access the event through the window.event object. You can prevent the default action by assigning false to its returnValue property and stop propagation by assigning true to its cancelBubble property.

Internet Explorer 9之前的版本不支持W3C事件系统。将事件监听器附加到元素及其attachEvent方法。当触发事件时，侦听器函数可以通过窗口访问事件。事件对象。您可以通过将false分配给它的returnValue属性来防止默认操作，并通过将true分配给它的cancelBubble属性来停止传播。

For example, you might create an event listener that looks like this:

例如，您可以创建一个事件监听器，其外观如下:

function handleClick (event) {
    if (event && event.stopPropagation) {
        event.preventDefault();
        event.stopPropagation();
    } else {
        event = window.event;
        event.returnValue = false;
        event.cancelBubble = true;
    }

    // the default action has been prevented and propagation has been stopped
    // do something interesting here...
}

You could then register it on an element like this:

然后你可以把它注册到这样的元素上:

var elem = document.getElementById( 'some-element' );
if (elem.addEventListener) {
    elem.addEventListener( 'click', handleClick, false );
} else {
    elem.attachEvent( 'onclick', handleClick );
}

jQuery handles this in its event.js file. Registering event listeners is handled by the private add function, which is called by jQuery.bind via jQuery.on. Stopping propagation and preventing the default are handled by the corresponding methods of the jQuery.Event class.

jQuery在事件中处理这个。js文件。注册事件监听器由私有添加函数处理，该函数由jQuery调用。通过jQuery.on绑定。停止传播和防止默认是由jQuery的相应方法处理的。事件类。

Creating Custom Events

There are two ways to create custom events in JavaScript. It's possible to ask the browser to fire a custom event on an element in both the W3C and Microsoft systems. That works, but it's usually overkill. It's much simpler to create an object that keeps track of a list of listener functions and provides methods for adding and removing listeners and dispatching events. Here's a simple one:

有两种方法可以在JavaScript中创建自定义事件。可以要求浏览器在W3C和Microsoft系统中的一个元素上启动自定义事件。这是可行的，但通常是过头了。创建一个跟踪侦听器函数列表并提供添加和删除侦听器和分派事件的方法的对象要简单得多。这是一个简单的一个:

var EventSource = function() {}
EventSource.prototype = {
    attach: function (name, callback) {
        if (!this.listeners) this.listeners = {};
        if (!this.listeners[ name ]) this.listeners[ name ] = [];
        this.listeners[ name ].push( callback );
    },

    detach: function (name, callback) {
        if (!this.listeners || !this.listeners[ name ]) return;
        var listeners = this.listeners[ name ];
        for (var idx = 0; idx < listeners.length; idx++) {
            if (listeners[ idx ] === callback) {
                listeners.splice( idx, 1 );
                break;
            }
        }
    },

    dispatch: function (name, event) {
        if (typeof event === 'undefined') event = {};
        event.event = name;

        if (!this.listeners || !this.listeners[ name ]) return false;
        var listeners = this.listeners[ name ];
        for (var idx = 0; idx < listeners.length; idx++) {
                try {
                    listeners[ idx ]( event );
                } catch (caught) {
                    // ignore it and keep calling the rest of the listeners
                }
            });
        return true;
    }
};

That's more-or-less what jQuery does, although of course theirs is far more complicated.

这差不多就是jQuery所做的，当然，jQuery要复杂得多。

#2

If you want to disable the default event for instance for a link you can do something like:

如果您想要禁用某个链接的默认事件，您可以这样做:

$("a").click(function(event) {
   //Prevent the default behaviour
   event.preventDefault();

   //Do your own thing:
   alert("hello!");
});

There is a lot of documentation to be found on Google when you search for preventDefault().

当您搜索preventDefault()时，在谷歌上可以找到很多文档。

You can basically use this for almost every event. Such as the .change(), .click(), focus(), submit(), ...

你基本上可以用这个来做几乎所有的事情。如.change(),.click(),焦点(),(),提交…

$('input[type="text"]').focus(function(event) {
   event.preventDefault();

   alert("Uhoh..");
});

Useful link: http://api.jquery.com/event.preventDefault/

有用的链接:http://api.jquery.com/event.preventDefault/

#3

event.stopPropigation(), and event.preventDefault() are both important.

event.stopPropigation()和event.preventDefault()都很重要。

However, more importantly is when to use them. Anytime you create an event, or bind to an event that you don't plan on letting 'bubble up' or doing it's default action (like connecting to a url from an tag);

然而，更重要的是何时使用它们。任何时候，只要你创建了一个事件，或者绑定了一个你不打算让“冒泡”的事件，或者做了默认的操作(比如连接到标签上的url);

$('.wrapper').delegate("a", "click", function(){
     event.preventDefault();
     //Stop from sending window.location = $(this).att('href');
});
$('.wrapper').delegate("a span", "click", function (){
    event.stopPropigation();
    //This will stop the click event from bubbling out of the span, up to the a, and calling the above event listener as well.
});

Hope this is close enough to plain English to help ya out without sounding like I came from one of your college lecture courses. OHhh, and it's important to use .delegate() for watching events, especially if you have javascript editing the DOM at all.

希望这足够接近简单的英语来帮助你，而不是听起来像我来自你的大学演讲课程。噢，使用.delegate()来查看事件是很重要的，特别是如果你有javascript编辑DOM的话。