誰かがこのコード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>
問題は、イベントをラッパーにバインドすると、ネストされた要素のバインドが失敗することだと思いました。
私はプロジェクトでこのケースを持っています.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();
}
});
}
})();
}
}
}