Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Configuring hammer for elements causes them to lose their default behavior and become buggy. #693

Closed
mccluredanr opened this issue Oct 21, 2014 · 3 comments

Comments

@mccluredanr
Copy link

When configuring my page to use HammerJS any element I turn a recognizer on for, will not properly handle its default events.

In safari, firefox, and the android browser nothing happens when tapping, swiping, pressing, and pinching elements for which hammer has been configured for. I know that when pinch is configured for an element it blocks it, however when I only configure tap or pan or press the same behavior is happening. On chrome only zooming and swiping is broken.

My end goal is to use hammer to simply listen for events, I don't always want to do anything other than know the event is happening.

Any help is much appreciated, I've been reading through the documentation and have not found any similar issues posted.

This is the code for my page.

<html xmlns="http://www.w3.org/1999/xhtml" >

<script type="text/javascript" src="./js/hammer2.js" ></script>

<head></head>
<body>
Pinch Area:<br>

<font id="pinch1" size="7">SOME TEXT</font><br>
<br>

Swipe Area:<br>
<input type="button" id="swipe1" onclick="alert('Works!')" value="Button" /><br>
<input type="checkbox" id="swipe2" value="red" style="height:13px;width:13px;"/><br>
<br>

Tap Area:<br>
<a href="http://google.com">
<img id="tap1" src="image.gif" width="100px" height="100px" onclick="alert('Works!')">
</a>
<br/>
<select id="tap2">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
</select>
<br>
<input type="text" id="tap3" /><br>
<input type="password" id="tap4" /><br>
<textarea cols="60" rows="10" id="tap5"></textarea><br>
<br><br><br>

<div id="eventText"></div>
Gesure SandBox:
<textarea id="sandbox" style="width:500px;height:500px;border:1px solid #000;"></textarea>
<script type="text/javascript" src="./js/gesture.js" ></script>
</body>

And the gesture.js file

var swipe1 = document.getElementById("swipe1"),
    swipe2 = document.getElementById("swipe2"),
    pinch1 = document.getElementById("pinch1"),
    tap1 = document.getElementById("tap1"),
    tap2 = document.getElementById("tap2"),
    tap3 = document.getElementById("tap3"),
    tap4 = document.getElementById("tap4"),
    tap5 = document.getElementById("tap5"),
    sandbox = document.getElementById("sandbox"),
    eventString = "";

//SWIPE
var swipeOptions = {

};
var hammertime1 = new Hammer(swipe1, swipeOptions);
hammertime1.on("panstart panend", function(ev){
    eventString = "There was a" + ev.type + "event";
    console.log(eventString);
});
var hammertime2 = new Hammer(swipe2, swipeOptions);
hammertime2.on("panstart panend", function(ev){
    eventString = "There was a" + ev.type + "event";
    console.log(eventString);
});

//PINCH
var pinchOptions = {

};
var hammertime3 = new Hammer(pinch1, pinchOptions);
hammertime3.on("pinchstart pinchend", function(ev){ 
    eventString = "There was a" + ev.type + "event";
    console.log(eventString);
});

//TAP
var tapOptions = {

};
var hammertime4 = new Hammer(tap1, tapOptions);
hammertime4.on("tap doubletap press", function(ev) {
    eventString = "There was a" + ev.type + "event";
    console.log(eventString);
});
var hammertime5 = new Hammer(tap2, tapOptions);
hammertime5.on("tap doubletap press", function(ev) {
    eventString = "There was a" + ev.type + "event";
    console.log(eventString);
});
var hammertime6 = new Hammer(tap3, tapOptions);
hammertime6.on("tap doubletap press", function(ev) {
    eventString = "There was a" + ev.type + "event";
    console.log(eventString);
});
var hammertime7 = new Hammer(tap4, tapOptions);
hammertime7.on("tap doubletap press", function(ev) {
    eventString = "There was a" + ev.type + "event";
    console.log(eventString);
});
var hammertime8 = new Hammer(tap5, tapOptions);
hammertime8.on("tap doubletap press", function(ev) {
    eventString = "There was a" + ev.type + "event";
    console.log(eventString);
});

//SANDBOX
var sandboxOptions = {

};
hammertime9 = new Hammer(sandbox);

hammertime9.on("tap doubletap press panstart panend pinchstart pinchend", function(ev){ 
    eventString = "There was a" + ev.type + "event";
    console.log(eventString);
});
@mccluredanr
Copy link
Author

I've seen to been able to reduce some of the issues. However I am still having problems getting the keyboard to pop up in safari and android browser. Also enabling swipe in all directions breaks scrolling on the element, however I think that this is a known issue.

@renanlecaro
Copy link

Please have a look at http://hammerjs.github.io/touch-action/ , the touch action property set to Auto will make hammer's detection transparent

@runspired
Copy link
Contributor

Closing as too generic and since #808 should address these issues.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants