HTML and CSS Reference
In-Depth Information
Touch
Let's start with touch, probably the most popular mobile device feature. You're surely aware that most phones
and tablets in today's market offer a capacitive touch screen interface, allowing users to interact with their fingers
as opposed to the traditional point-and-click mouse interface. This is a huge shift in the way web content is
developed, as the industry so accustomed to working with mouse clicks and mouseovers as a form of interaction and
measurement. Now developers can take advantage of taps, swipes, pinches, and other gestures to add interactivity to
creatives and thus open up a whole new world of immersive creativity for advertisers and creative agencies to work
inside. Instead of using traditional “click to expand” CTA, you'll notice “tap to expand,” “tap to call,” “tap to map,” and
so on. These CTAs are ever more widely used in this, the dawn of touch devices, and specifically mobile advertising.
Touch Events
The following events are used when working with touch API on mobile and tablet:
touchstart
, which is triggered
when a finger is placed on any DOM element;
touchmove
, triggered when a finger is dragged along any DOM element;
and
touchend
, triggered when a finger is removed or picked up from any DOM element. Remember our viewport
settings? Mobile browsers natively have default touch settings. If you think about it, this won't work so well if your
browser has its own set of swipe and gesture behaviors and your ad creative does, too. To work around this, set the
viewport so the user cannot scale using
user-scalable=no
. By following in your code editor and using the JavaScript
touch API, you can use the code to touch and drag an element onscreen and instruct the browser to prevent its default
behavior, which would be to move the window as a whole (see Listing 8-12).
Listing 8-12.
Preventing the Browser's Default Touch Behavior
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="initial-scale=1, user-scalable=no">
</head>
<body>
<div id="element" style="position:absolute; background-color:black; width:50px;
height:50px;"></div>
</body>
<html>
<script>
var element = document.getElementById("element");
element.addEventListener('touchmove', function(event) {
event.preventDefault();
if (event.targetTouches.length === 1) {
console.log(event)
var touch = event.targetTouches[0];
// Place element where the finger is
element.style.left = touch.pageX + 'px';
element.style.top = touch.pageY + 'px';
}
}, false);
</script>
</html>
