javascript - 触摸事件处理程序覆盖点击处理程序

Question

我正在 AngularJS 中创建自定义可拖动指令。它是 jQuery 事件和 vanilla javascript 的组合。我正在努力使它尽可能通用和可重复使用，并且它还必须是触摸友好的。

长话短说

我无法在触摸环境中单击可拖动指令上的按钮。

重现步骤:

1. 打开代码笔示例:CodePen
2. 在 Chrome 上，F12，模拟 iPad 3/4
3. 通过标题拖动面板 = 作品!
4. 点击按钮 = 没有警报。

更长的解释

该指令可选择使其放置的整个元素可拖动，除非放置了类为“drag-handle”的元素，在这种情况下，它用作元素的拖动 handle 。我通常将其与 Bootstrap 面板一起使用，因为这是一个简单的示例。

该指令在桌面上运行良好，但在触摸设备上，如果拖动 handle 上有任何可点击的项目，则拖动处理程序会覆盖点击事件并且永远不会调用它。

示例 HTML 为:

<div class="panel panel-default" app-draggable>
    <div class="panel-heading drag-handle"> <!-- Drag Handle -->
        <div class="panel-title">
            Example Title
            <button onclick="alert('clicked')" class="btn btn-xs btn-primary pull-right" type="button">Click</button>
        </div>
    </div>
    <div class="panel-body">Example body</div>
</div>

所以在桌面上，您既可以拖动面板，也可以单击按钮来获取警报。但是，当我在 Chrome 上模拟 iPad 3/4(或在真正的 iPad 上将其拉起)时，点击永远不会触发。

我的指令如下。它将容器设置为绝对容器(除非容器已经固定，在这种情况下它将补偿并仍然使其可拖动。

 /*
 * @summary
 * Directive that makes an element draggable.
 * @description
 * This directive should be used in conjunction with specifying a drag handle 
 * on the element. If not, then entire element will be draggable.
 * @example
 * <div class='myDiv' app-draggable>
 *   <div class='drag-handle'>This will be the drag handle</div>
 *   <div>This will be dragged</div>
 * </div>
 */
angular.module("app")
    .directive('appDraggable', appDraggable);

function appDraggable() {
    var directive = {
        restrict: 'A',
        link: link
    };

    function link(scope, element) {
        var startX = 0, startY = 0, x = 0, y = 0;
        var startTop;
        var startLeft;
        var dragHandle = element[0].querySelector(".drag-handle");
        var dragHandleElement;
        /*
         * If there is a dragHandle specified, add the touch events to it.
         * Otherwise, make the entire element draggable.
         */ 
        if (dragHandle) {
            dragHandleElement = angular.element(dragHandle);
            addTouchHandlers(dragHandle);
        } else {
            dragHandleElement = element;
            addTouchHandlers(element[0]);
        }

        var position = element.css('position');

        if (position !== "absolute") {
            if (position === "fixed") {
                // If fixed, get the start offset relative to the document.
                startTop = element.offset().top;
                startLeft = element.offset().left;
                /*
                 * Explicitly set the height and width of the element to prevent
                 * overrides by preset values.
                 */ 
                var height = parseInt(element.height(), 10);
                var width = parseInt(element.width(), 10);
                element.css({
                    height: height,
                    width: width
                });
            } else {
                // If it's not fixed, it needs to be absolute.
                element.css({
                    position: 'absolute',
                });
                // And positioned originally relative to the parent.
                startTop = element.position().top;
                startLeft = element.position().left;
            }
        }


        /*
         * @function
         * @description
         * Add event handlers to the drag handle to capture events.
         */
        dragHandleElement.on('mousedown', function (event) {

            /*
             * Prevent default dragging of selected content
             */
            event.preventDefault();
            startX = event.pageX - x;
            startY = event.pageY - y;
            dragHandleElement.on('mousemove', mousemove);
            dragHandleElement.on('mouseup', mouseup);
        });

        function mousemove(event) {

            y = event.pageY - startY;
            x = event.pageX - startX;
            var finalTop = y + startTop;
            var finalLeft = x + startLeft;
            element.css({
                top: finalTop + 'px',
                left: finalLeft + 'px'
            });
        }

        function mouseup() {
            dragHandleElement.off('mousemove', mousemove);
            dragHandleElement.off('mouseup', mouseup);
        }

        function touchHandler(event) {
            var touch = event.changedTouches[0];

            if (event.target !== dragHandleElement) {
                //////////////// HACK ///////////////////////////
                //event.target.click(); // Hack as a work around.
            }

            var simulatedEvent = document.createEvent("MouseEvent");
            simulatedEvent.initMouseEvent({
                touchstart: "mousedown",
                touchmove: "mousemove",
                touchend: "mouseup"
            }[event.type], true, true, window, 1,
            touch.screenX, touch.screenY,
            touch.clientX, touch.clientY, false,
            false, false, false, 0, null);

            touch.target.dispatchEvent(simulatedEvent);
            event.preventDefault();
        }

        function addTouchHandlers(element) {
            element.addEventListener("touchstart", touchHandler, true);
            element.addEventListener("touchmove", touchHandler, true);
            element.addEventListener("touchend", touchHandler, true);
            element.addEventListener("touchcancel", touchHandler, true);
        }


    }
    return directive;
}

你会注意到上面的指令中有一个 hack:

if (event.target !== dragHandleElement) {
     //////////////// HACK ///////////////////////////
     //event.target.click(); // Hack as a work around.
}

如果我取消注释，它可以在触摸设备上运行，因为它会检查触摸目标是否是 dragHandle，如果不是，则手动单击目标。这行得通，但对我来说似乎很讨厌，我真的很想要一个更好的解决方案。它不会返回 false 或 stopPropagation，因为目标并不总是直接是 dragHandle，但它仍然需要拖动。

我不知道为什么这不起作用，因为它不会手动停止触摸事件的传播，因为它使用 event.preventDefault 而不是 event.stopPropagation，但我确定我错过了一些东西。

你可以重现here .

此外，欢迎任何其他关于如何改进上述代码以使其与平台设备无关或更健壮的建议!

想法？

谢谢!

Answer 1

找到问题了。

我上面的 touchHandler 函数总是在触摸时传输“mousedown”事件，即使它应该传输更准确的“click”事件。因为我所有的事件处理程序都在寻找“点击”事件，所以他们忽略了正在传输的“鼠标按下”事件。

我将我的 touchHandler 函数更改为如下所示，它的效果非常好。

    var mouseMoved = false;
    function touchHandler(event) {
        // Declare the default mouse event.
        var mouseEvent = "mousedown";
        // Create the event to transmit.
        var simulatedEvent = document.createEvent("MouseEvent");

        switch (event.type) {
        case "touchstart":
            mouseEvent = "mousedown";
            break;
        case "touchmove":
            /*
            * If this has been hit, then it's a move and a mouseup, not a click
            * will be transmitted.
            */
            mouseMoved = true;
            mouseEvent = "mousemove";
            break;
        case "touchend":
            /*
            * Check to see if a touchmove event has been fired. If it has
            * it means this have been a move and not a click, if not
            * transmit a mouse click event.
            */
            if (!mouseMoved) {
                mouseEvent = "click";
            } else {
                mouseEvent = "mouseup";
            }
            // Initialize the mouseMove flag back to false.
            mouseMoved = false;
            break;
        }

        var touch = event.changedTouches[0];

        /*
         * Build the simulated mouse event to fire on touch events.
         */
        simulatedEvent.initMouseEvent(mouseEvent, true, true, window, 1,
        touch.screenX, touch.screenY,
        touch.clientX, touch.clientY, false,
        false, false, false, 0, null);

        /*
         * Transmit the simulated event to the target. This, in combination
         * with the case statement above, ensures that click events are still
         * transmitted and bubbled up the chain.
         */
        touch.target.dispatchEvent(simulatedEvent);

        /*
         * Prevent default dragging of element.
         */
        event.preventDefault();
    }

此实现在 touchstart 和 touchend 之间查找 touchmove 事件。如果有，则它会设置一个标志并传输 click 事件而不是 mousedown 事件。

它也可以与计时器结合使用，这样即使鼠标移动的幅度很小，它也会传输一个点击事件，但就我的目的而言，这非常有效。