Why is declaring doctype html preventing event drag or touch to trigger?

StackOverflow https://stackoverflow.com/questions/21780121

Question

When declaring doctype html my code stops working, so no event drag or touch is triggered.

I'm working in a prototype to drag an image element inside a container element, to crop it. I'll also implement pinch to zoom, etc. To make this work better on mobile browsers, I need to set this in the head of the document, which helps preventing double taps and other unwanted event triggering:

<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">

You can find a working example, without doctype being declared:

http://jsbin.com/cokil/5

If I do declare doctype and put the meta viewport it stops working, but I can't seem to understand why:

http://jsbin.com/cokil/4

It's also been tested, just adding the doctype and no meta viewport. Won't work at all!

Any tips or advice ?

Était-ce utile?

La solution

When you declare a DOCTYPE, your page tells the browser to render the page strictly. If you simply omit the declaration, it will instead use the so called Quirksmode.

So obviously your code does not comply with HTML 5 strict-mode which is used when you add <!DOCTYPE html>.

I hope this is the advice you needed.

EDIT:

I found what causes your script from working. In your drag-Event: simply replace your old lines with:

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

The strict mode requires you to return numeric values that are followed by a px just like you are defining it in your style attribute: style="top:0px; left:0px;".

Autres conseils

I found out that by concatenating + "px" fixes the issue:

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

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

        });

You should ensure that there is no html errors or the rendering will use the quirksmode even if you specify a doctype.

You can use this service to check the validity of your page: http://validator.w3.org/check

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top