我正在 AngularJS 中创建一个自定义的可拖动指令。它是 jQuery 事件和普通 JavaScript 的组合。我试图使其尽可能通用和可重复使用，而且它还必须是触摸友好的。
TL；博士
我无法在触摸环境中单击可拖动指令上的按钮。
重现步骤：
更长的解释
该指令可以选择使其放置的整个元素可拖动，除非放置了具有“drag-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，因为目标并不总是直接拖动Handle，但它仍然需要拖动。
我不知道为什么这不起作用，因为它不会手动停止触摸事件的传播，因为它使用 event.preventDefault 而不是 event.stopPropagation，但我确信我错过了一些东西。
您可以在此处复制。
此外，欢迎就如何改进上述代码以使其更加平台设备无关或更强大提供任何其他建议！
想法？
谢谢！
发现问题了。
我的
touchHandler我将我的
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();
}
此实现在
touchmovetouchstarttouchendclickmousedown它还可以与计时器结合使用，这样即使鼠标移动少量，它也会传输点击事件，但就我的目的而言，这效果非常好。
除了Blunderfest回复之外，由于事件API从2015年开始有了很大的改进，你可以这样做：
e.target.dispatchEvent(new MouseEvent('click', {
view: window,
bubbles: true,
cancelable: true
}));