focus|blur|mouseenter|mouseleave: ensuring natively triggered events are handled properly

Author: fabiospampinato

src/core/types.ts

@@ -3,6 +3,8 @@ interface Event {
   namespace: string,
   data: any,
   ___cd?: boolean, // Delegate
+  ___ifocus?: boolean, // Ignore focus
+  ___iblur?: boolean, // Ignore blur
   ___ot?: string, // Original type
   ___td?: boolean // Trigger data
 }

src/events/off.ts

@@ -47,14 +47,17 @@ fn.off = function ( this: Cash, eventFullName?: string | Record<string, EventCal
     each ( getSplitValues ( eventFullName ), ( i, eventFullName ) => {
 
       const [nameOriginal, namespaces] = parseEventName ( eventFullName ),
-            name = getEventNameBubbling ( nameOriginal );
+            name = getEventNameBubbling ( nameOriginal ),
+            isEventBubblingProxy = ( nameOriginal !== name );
 
       this.each ( ( i, ele ) => {
 
         if ( !isElement ( ele ) && !isDocument ( ele ) && !isWindow ( ele ) ) return;
 
         removeEvent ( ele, name, namespaces, selector, callback );
 
+        if ( isEventBubblingProxy ) removeEvent ( ele, nameOriginal, namespaces, selector, callback );
+
       });
 
     });

src/events/on.ts

@@ -90,7 +90,7 @@ function on ( this: Cash, eventFullName: Record<string, EventCallback> | string,
 
       const finalCallback = function ( event: Event ) {
 
-        if ( isEventBubblingProxy && event.___ot !== nameOriginal ) return;
+        if ( isEventBubblingProxy && ( event.___ot ? event.___ot !== nameOriginal : event.type !== nameOriginal || ( event.target[`___i${nameOriginal}`] && ( delete event.target[`___i${nameOriginal}`], event.stopImmediatePropagation (), true ) ) ) ) return;
 
         if ( event.namespace && !hasNamespaces ( namespaces, event.namespace.split ( eventsNamespacesSeparator ) ) ) return;
 
@@ -159,6 +159,8 @@ function on ( this: Cash, eventFullName: Record<string, EventCallback> | string,
 
       addEvent ( ele, name, namespaces, selector, finalCallback );
 
+      if ( isEventBubblingProxy ) addEvent ( ele, nameOriginal, namespaces, selector, finalCallback );
+
     });
 
   });

src/events/trigger.ts

@@ -35,7 +35,13 @@ fn.trigger = function ( this: Cash, event: Event | string, data?: any ) {
 
   return this.each ( ( i, ele ) => {
 
-    if ( isEventFocus && isFunction ( ele[event.___ot] ) ) ele[event.___ot]();
+    if ( isEventFocus && isFunction ( ele[event.___ot] ) ) {
+
+      ele[`___i${event.___ot}`] = true; // Ensuring this event gets ignored
+
+      ele[event.___ot]();
+
+    }
 
     ele.dispatchEvent ( event );
 

test/modules/events.js

@@ -6,6 +6,7 @@ var fixture = '\
         <div class="grandchild"></div>\
       </div>\
     </div>\
+    <input class="input" />\
     <div class="event-focus" tabindex="-1">\
       <div class="event-focus-child" tabindex="-1"></div>\
     </div>\
@@ -102,7 +103,7 @@ describe ( 'Events', { beforeEach: getFixtureInit ( fixture ) }, function () {
 
       events.forEach ( function ( event, index ) {
 
-        it ( `[${event} -> ${eventsTrigger[index]}]`, function ( t ) {
+        it ( '[' + event + ' -> ' + eventsTrigger[index] + ']', function ( t ) {
 
           var doc = $(document);
           var ele = $('.event-focus');
@@ -183,6 +184,28 @@ describe ( 'Events', { beforeEach: getFixtureInit ( fixture ) }, function () {
 
     });
 
+    ( document.hasFocus () ? it : it.skip )( 'listens to native focus/blur', function ( t ) { // If the document isn't focused the element won't get the focus either
+
+      var events = ['focus', 'blur'];
+
+      events.forEach ( function ( event ) {
+
+        var input = $('.input');
+        var count = 0;
+
+        function handler () {
+          count++;
+        }
+
+        input.on ( event, handler );
+        input[0][event] ();
+
+        t.is ( count, 1 );
+
+      });
+
+    });
+
     it ( 'supports namespaces', function ( t ) {
 
       var ele = $('.event');
@@ -737,10 +760,9 @@ describe ( 'Events', { beforeEach: getFixtureInit ( fixture ) }, function () {
           nativeHandler.apply ( this, arguments );
         };
 
-        ele.on ( event, handler );
         ele.trigger ( event );
 
-        t.is ( count, 2 );
+        t.is ( count, 1 );
 
       });