Ticket #46260: 46260.diff

src/js/_enqueues/lib/comment-reply.js

@@ -61 +61 @@
                         return;
                 }
 
-                // Get required elements.
-                cancelElement = getElementById( config.cancelReplyId );
-                commentFormElement = getElementById( config.commentFormId );
-
-                // No cancel element, no replies.
-                if ( ! cancelElement ) {
-                        return;
-                }
-
-                cancelElement.addEventListener( 'touchstart', cancelEvent );
-                cancelElement.addEventListener( 'click',      cancelEvent );
-
-                var links = replyLinks( context );
-                var element;
-
-                for ( var i = 0, l = links.length; i < l; i++ ) {
-                        element = links[i];
-
-                        element.addEventListener( 'touchstart', clickEvent );
-                        element.addEventListener( 'click',      clickEvent );
-                }
-        }
-
-        /**
-         * Return all links classed .comment-reply-link.
-         *
-         * @since 5.1.0
-         *
-         * @param {HTMLElement} context The parent DOM element to search for links.
-         *
-         * @return {HTMLCollection|NodeList|Array}
-         */
-        function replyLinks( context ) {
-                var selectorClass = config.commentReplyClass;
-                var allReplyLinks;
-
                 // childNodes is a handy check to ensure the context is a HTMLElement.
                 if ( ! context || ! context.childNodes ) {
                         context = document;
                 }
 
-                if ( document.getElementsByClassName ) {
-                        // Fastest.
-                        allReplyLinks = context.getElementsByClassName( selectorClass );
-                }
-                else {
-                        // Fast.
-                        allReplyLinks = context.querySelectorAll( '.' + selectorClass );
-                }
+                document.addEventListener( 'touchstart', cancelEvent );
+                document.addEventListener( 'click',      cancelEvent );
 
-                return allReplyLinks;
+                context.addEventListener( 'touchstart', clickEvent );
+                context.addEventListener( 'click',      clickEvent );
         }
 
         /**
@@ -122 +81 @@
          * @param {Event} event The calling event.
          */
         function cancelEvent( event ) {
-                var cancelLink = this;
+                if ( ! matches( event.target, '#' + config.cancelReplyId ) ) {
+                        return;
+                }
+
+                var cancelLink = event.target;
                 var temporaryFormId  = config.temporaryFormId;
                 var temporaryElement = getElementById( temporaryFormId );
 
@@ -147 +110 @@
          * @param {Event} event The calling event.
          */
         function clickEvent( event ) {
-                var replyLink = this,
+                if ( ! matches( event.target, '.' + config.commentReplyClass ) ) {
+                        return;
+                }
+
+                var replyLink = event.target,
                         commId    = getDataAttribute( replyLink, 'belowelement'),
                         parentId  = getDataAttribute( replyLink, 'commentid' ),
                         respondId = getDataAttribute( replyLink, 'respondelement'),
@@ -198 +165 @@
                 return document.getElementById( elementId );
         }
 
+        /**
+         * Checks if the element matches the selector.
+         *
+         * Local alias/polyfill for Element.prototype.matches.
+         *
+         * @since 5.1.0
+         *
+         * @param {HTMLElement} element  The element to be checked.
+         * @param {String}      selector The selector to match.
+         *
+         * @return {Boolean} Whether or not the element matched the selector.
+         */
+        function matches( element, selector ) {
+                if ( ! element ) {
+                        return false;
+                }
+
+                var matches = element.matches ||
+                        element.matchesSelector ||
+                        element.mozMatchesSelector ||
+                        element.msMatchesSelector ||
+                        element.oMatchesSelector ||
+                        element.webkitMatchesSelector;
+
+                if ( matches ) {
+                        return matches.call( element, selector );
+                }
+
+                return false;
+        }
+
         /**
          * Moves the reply form from its current position to the reply location.
          *
@@ -213 +211 @@
         function moveForm( addBelowId, commentId, respondId, postId ) {
                 // Get elements based on their IDs.
                 var addBelowElement = getElementById( addBelowId );
-                respondElement  = getElementById( respondId );
 
                 // Get the hidden fields.
                 var parentIdField   = getElementById( config.parentIdFieldId );
                 var postIdField     = getElementById( config.postIdFieldId );
                 var element, cssHidden, style;
 
-                if ( ! addBelowElement || ! respondElement || ! parentIdField ) {
+                respondElement     = getElementById( respondId );
+                cancelElement      = getElementById( config.cancelReplyId );
+                commentFormElement = getElementById( config.commentFormId );
+
+                if ( ! addBelowElement || ! respondElement || ! parentIdField || ! cancelElement || ! commentFormElement ) {
                         // Missing key elements, fail.
                         return;
                 }