Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[BUGFIX beta] support mouseEnter/Leave events w/o jQuery #16603

Merged
merged 1 commit into from
Aug 10, 2018
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
50 changes: 50 additions & 0 deletions packages/ember-glimmer/tests/integration/event-dispatcher-test.js
Original file line number Diff line number Diff line change
Expand Up @@ -146,6 +146,56 @@ moduleFor(

this.$('#is-done').trigger('click');
}

['@test delegated event listeners work for mouseEnter/Leave'](assert) {
let receivedEnterEvents = [];
let receivedLeaveEvents = [];

this.registerComponent('x-foo', {
ComponentClass: Component.extend({
mouseEnter(event) {
receivedEnterEvents.push(event);
},
mouseLeave(event) {
receivedLeaveEvents.push(event);
},
}),
template: `<div id="inner"></div>`,
});

this.render(`{{x-foo id="outer"}}`);

let parent = this.element;
let outer = this.$('#outer')[0];

// mouse moves over #outer
this.runTask(() => {
this.$('#outer').trigger('mouseenter', { canBubble: false, relatedTarget: parent });
this.$('#outer').trigger('mouseover', { relatedTarget: parent });
});
assert.equal(receivedEnterEvents.length, 1, 'mouseenter event was triggered');
assert.strictEqual(receivedEnterEvents[0].target, outer);

// mouse moves over #inner
this.runTask(() => {
this.$('#inner').trigger('mouseover', { relatedTarget: outer });
});
assert.equal(receivedEnterEvents.length, 1, 'mouseenter event was not triggered again');

// mouse moves out of #inner
this.runTask(() => {
this.$('#inner').trigger('mouseout', { relatedTarget: outer });
});
assert.equal(receivedLeaveEvents.length, 0, 'mouseleave event was not triggered');

// mouse moves out of #outer
this.runTask(() => {
this.$('#outer').trigger('mouseleave', { canBubble: false, relatedTarget: parent });
this.$('#outer').trigger('mouseout', { relatedTarget: parent });
});
assert.equal(receivedLeaveEvents.length, 1, 'mouseleave event was triggered');
assert.strictEqual(receivedLeaveEvents[0].target, outer);
}
}
);

Expand Down
94 changes: 79 additions & 15 deletions packages/ember-views/lib/system/event_dispatcher.js
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,11 @@ import addJQueryEventDeprecation from './jquery_event_deprecation';
const ROOT_ELEMENT_CLASS = 'ember-application';
const ROOT_ELEMENT_SELECTOR = `.${ROOT_ELEMENT_CLASS}`;

const EVENT_MAP = {
mouseenter: 'mouseover',
mouseleave: 'mouseout',
};

/**
`Ember.EventDispatcher` handles delegating browser events to their
corresponding `Ember.Views.` For example, when you click on a view,
Expand Down Expand Up @@ -290,27 +295,86 @@ export default EmberObject.extend({
}
};

let handleEvent = (this._eventHandlers[event] = event => {
let target = event.target;
// Special handling of events that don't bubble (event delegation does not work).
// Mimics the way this is handled in jQuery,
// see https://github.com/jquery/jquery/blob/899c56f6ada26821e8af12d9f35fa039100e838e/src/event.js#L666-L700
if (EVENT_MAP[event] !== undefined) {
let mappedEventType = EVENT_MAP[event];
let origEventType = event;

let createFakeEvent = (eventType, event) => {
let fakeEvent = document.createEvent('MouseEvent');
fakeEvent.initMouseEvent(
eventType,
false,
false,
event.view,
event.detail,
event.screenX,
event.screenY,
event.clientX,
event.clientY,
event.ctrlKey,
event.altKey,
event.shiftKey,
event.metaKey,
event.button,
event.relatedTarget
);

// fake event.target as we don't dispatch the event
Object.defineProperty(fakeEvent, 'target', { value: event.target, enumerable: true });

return fakeEvent;
};

let handleMappedEvent = (this._eventHandlers[mappedEventType] = event => {
let target = event.target;
let related = event.relatedTarget;

do {
if (viewRegistry[target.id]) {
if (viewHandler(target, event) === false) {
event.preventDefault();
event.stopPropagation();
do {
// For mouseenter/leave call the handler if related is outside the target.
// No relatedTarget if the mouse left/entered the browser window
if (viewRegistry[target.id]) {
if (!related || (related !== target && !target.contains(related))) {
viewHandler(target, createFakeEvent(origEventType, event));
}
break;
}
} else if (target.hasAttribute('data-ember-action')) {
if (actionHandler(target, event) === false) {
} else if (target.hasAttribute('data-ember-action')) {
if (!related || (related !== target && !target.contains(related))) {
actionHandler(target, createFakeEvent(origEventType, event));
}
break;
}
}

target = target.parentNode;
} while (target && target.nodeType === 1);
});
target = target.parentNode;
} while (target && target.nodeType === 1);
});

rootElement.addEventListener(mappedEventType, handleMappedEvent);
} else {
let handleEvent = (this._eventHandlers[event] = event => {
let target = event.target;

do {
if (viewRegistry[target.id]) {
if (viewHandler(target, event) === false) {
event.preventDefault();
event.stopPropagation();
break;
}
} else if (target.hasAttribute('data-ember-action')) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

target can be a text node which does not support hasAttribute method -> http://take.ms/vCrm8C

if (actionHandler(target, event) === false) {
break;
}
}

rootElement.addEventListener(event, handleEvent);
target = target.parentNode;
} while (target && target.nodeType === 1);
});

rootElement.addEventListener(event, handleEvent);
}
} else {
rootElement.on(`${event}.ember`, '.ember-view', function(evt) {
let view = viewRegistry[this.id];
Expand Down