Question

当声明doctype html时，我的代码停止工作，因此不会触发事件拖动或触摸。

我正在使用原型在容器元素中拖动图像元素来裁剪它。我还将实现pinch to zoom等。为了在移动浏览器上更好地工作，我需要在文档的头部设置它，这有助于防止双击和其他不需要的事件触发：

您可以找到一个工作示例，但未声明doctype：

http://jsbin.com/cokil/5

如果我确实声明了doctype并放置了meta视口，它就会停止工作，但我似乎无法理解为什么：

http://jsbin.com/cokil/4

它也经过测试，只是添加了doctype而没有添加元视口。根本不起作用！

任何提示或建议？

感谢您的期待！

Answer 1

当您声明DOCTYPE时，您的页面会告诉浏览器严格呈现页面。如果您只是省略声明，它将改为使用所谓的Quirksmode。

很明显，您的代码不符合添加<!DOCTYPE html>时使用的HTML 5严格模式。

我希望这是你需要的建议。

修改

我找到了导致脚本工作的原因。在drag - 事件中：只需用以下内容替换旧行：

imgEl.style.top = y + parseFloat(event.gesture.deltaY)+'px'; imgEl.style.left = x + parseFloat(event.gesture.deltaX)+'px';

严格模式要求您返回px之后的数值，就像您在样式属性中定义它一样：style="top:0px; left:0px;"。

Answer 2

我发现通过连接+“px”解决了这个问题：

        Hammer(element).on("drag", function(event) {

            imgEl.style.top = y + parseFloat(event.gesture.deltaY) + "px";
            imgEl.style.left = x + parseFloat(event.gesture.deltaX) + "px";

        });

Answer 3

即使您指定了doctype，也应该确保没有html错误或渲染将使用quirksmode。

您可以使用此服务检查网页的有效性：http://validator.w3.org/check

为什么声明doctype html阻止事件拖动或触摸触发？

3 个答案: