2

有人可以解释这段代码https://github.com/jquery/jquery/blob/master/src/event.js#L646-L670吗？

我使用淘汰赛，但在 Opera 中遇到问题。我试图重现，但效果很好，所以我不确定我的情况是否正确。

<div class="wrapper" data-bind="event: { mouseover: function() {}, mouseout: function() {} }">
    wrapper
    <div class="nested" title="nested">
        nested
    </div>
</div>

http://jsfiddle.net/uzbCB/

我认为问题是：当我们将事件绑定到包装器时，嵌套元素的绑定将失败。

我在项目中有这种情况，包装器上的 ko 事件绑定和本机鼠标悬停不适用于嵌套元素。本机鼠标悬停行为 - 在鼠标悬停时显示“标题”标签。所以它不起作用。

正如您在 jsfiddle 中看到的，它工作正常，所以我不知道。

我实现了这段 jQuery 的代码来敲除的事件绑定代码，现在它工作正常，但我不能说，这种情况对我来说很清楚。

需要你的帮助！

这是 ko 绑定的结果：

ko.bindingHandlers.dgEvent = {
    'init' : function (element, valueAccessor, allBindingsAccessor, viewModel) {
        var eventsToHandle = valueAccessor() || {};
        for(var eventNameOutsideClosure in eventsToHandle) {
            (function() {
                var eventName = eventNameOutsideClosure; // Separate variable to be captured by event handler closure
                if (typeof eventName == "string") {
                    ko.utils.registerEventHandler(element, eventName, function (event) {
                        var handlerReturnValue;
                        var handlerFunction = valueAccessor()[eventName];
                        if (!handlerFunction)
                            return;
                        var allBindings = allBindingsAccessor();

                        // jQuery's workaround Opera's mouseover issue.
                        // If we have event binding on wrapper - native mouseover
                        // title tooltip bindings on nested elements wouldn't work.
                        // https://github.com/jquery/jquery/blob/master/src/event.js#L646-L670
                        if ( eventName === 'mouseover' || eventName === 'mouseout' ) {
                            var ret,
                                target = this,
                                related = event.relatedTarget,
                                handleObj = event.handleObj;

                            // For mousenter/leave call the handler if related is outside the target.
                            // NB: No relatedTarget if the mouse left/entered the browser window
                            if ( !related || (related !== target ) ) {
                                event.type = handleObj.origType;
                                ret = handlerFunction.apply( this, arguments );
                                event.type = eventName;
                            }
                            return ret;
                        }

                        try {
                            // Take all the event args, and prefix with the viewmodel
                            var argsForHandler = ko.utils.makeArray(arguments);
                            argsForHandler.unshift(viewModel);
                            handlerReturnValue = handlerFunction.apply(viewModel, argsForHandler);
                        } finally {
                            if (handlerReturnValue !== true) { // Normally we want to prevent default action. Developer can override this be explicitly returning true.
                                if (event.preventDefault)
                                    event.preventDefault();
                                else
                                    event.returnValue = false;
                            }
                        }

                        var bubble = allBindings[eventName + 'Bubble'] !== false;
                        if (!bubble) {
                            event.cancelBubble = true;
                            if (event.stopPropagation)
                                event.stopPropagation();
                        }
                    });
                }
            })();
        }
    }
}
4

0 回答 0