Solved

hammer.js tap and pressup interferences

Posted on 2016-11-25
15
10 Views
Last Modified: 2016-11-30
Hi everybody.
I'm implementing hammer 2 to manage pressup and tap event on table rows. Everything works fine but I get an issue. This is my code:

$('#grid_in').hammer({time: 1000, domEvents: true}).on('pressup', 'tr)', function () {
    $(this).addClass('row-selected');
})
$('#grid_in').hammer({domEvents: true}).on('tap', 'tr:not(.row-selected)', function () {
    $(this).removeClass('row-selected');
});

Open in new window


So if I press for just a few time, the class is added and then immediately removed: it looks like pressup fires even if I press for less a second. What do I am missing?

Thank you for your help.
0
Comment
Question by:Marco Gasi
  • 9
  • 6
15 Comments
 
LVL 82

Expert Comment

by:leakim971
ID: 41901530
line 1, I see a right parenthese : 'tr)' instead 'tr'
0
 
LVL 31

Author Comment

by:Marco Gasi
ID: 41901549
Hi leakim971. It's just  typo here in my question. There isn't in my code.
0
 
LVL 82

Assisted Solution

by:leakim971
leakim971 earned 500 total points
ID: 41901554
ok what about (we have removed the tap event) :

$('#grid_in').hammer({time: 1000, domEvents: true}).on('pressup', 'tr)', function () {
    $('tr', '#grid_in').removeClass('row-selected');
    $(this).addClass('row-selected');
});

Open in new window

0
 
LVL 31

Author Comment

by:Marco Gasi
ID: 41901560
Oh, yes: let me check it, please.
0
 
LVL 31

Author Comment

by:Marco Gasi
ID: 41901574
Unfortunately, no success.
Tap and press work great: the issue arises only if I press only for less than a second.
Tap (up to 250 milliseconds): ok
Press for 1000 milliseconds: ok, when I stop to press, pressup is fired
Press for a time between 251 and 1000 seconds first fires pressup and then it fires tap. It looks like even the 'press' event be fired though it not be implemented. I'm going to try to implement press event preventing default...
0
 
LVL 31

Author Comment

by:Marco Gasi
ID: 41901600
Nothing to do. I also tried to put e.stopPropagation() in both pressup and tap events.
Putting some log, I see only that pressup vents is fired even for a pressure shorter than the set time... Really strange.
0
 
LVL 82

Expert Comment

by:leakim971
ID: 41901625
pressup is not a good event, maybe use tap or touchend :
$('#grid_in').hammer({time: 1000, domEvents: true}).on('touchend', 'tr)', function (evt) {
    evt.stopImmediatePropagation(); // stronger
    $('tr', '#grid_in').removeClass('row-selected');
    $(this).addClass('row-selected');
});

Open in new window

0
DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

 
LVL 31

Author Comment

by:Marco Gasi
ID: 41901654
Can I ask why pressup is not a good event? Also, does touchend fires even when user tap? Anyway, I'm going to try
0
 
LVL 82

Expert Comment

by:leakim971
ID: 41901698
because it's an hammer event, not a native browser event
0
 
LVL 31

Accepted Solution

by:
Marco Gasi earned 0 total points
ID: 41901718
Ok, leakim, I found it. The problem was in another part of the code (as often it happens to me):
	$('body').on('click', function (e) {
		e.stopImmediatePropagation();
		$('#mg-commands').fadeOut();
		$('#grid_in tr').removeClass('row-selected');
		$(this).find('div.row-checked').fadeOut();
	});

Open in new window


This code was intended to cancel selection if user taps in any part of the body: once commented out, everything works fine.
But I still would like to allow the user to cancel selection tapping in any other part of the page except the table. I tried to do something like this but it doesn't work, in the sense that the previous bug arises again (if I just remove this code it is perfect).
$('body:not(#grid)').on('click', function (e) {

Open in new window


Any idea on how I can bind an event to the body excluding some specific element (possibly a list of elements)?
0
 
LVL 82

Expert Comment

by:leakim971
ID: 41901753
usualy the method is to cover the whole body with a div and display the object (popup, selection, what you want) over this overlay
so i'm not sure about a different logic...

you can try to fight with a if/else with :
$(e.target) / e.target which is the element receiving the tap.

$('body').on('click', function (e) {
    alert("you touch : " + e.target.toString() ); 

Open in new window

0
 
LVL 31

Author Comment

by:Marco Gasi
ID: 41901760
Mmmhh, it sounds godd but after all I'll let the user tap the row or press the phone back button to deselect the selected row: it's an expected behavior and it looks a lot of work to get something it isn't really needed :)
Thank you, leakim
0
 
LVL 82

Expert Comment

by:leakim971
ID: 41901763
another way is to use a setTimeout on the body

$('body').on('click', function (e) {
     setTimeout(function() {
          var isNotOnTableFlag = !!$('#grid_in').hasClass("clickedOnMe");
          if(isNotOnTableFlag)  {
                $('#grid_in').removeClass("clickedOnMe");
		e.stopImmediatePropagation();
		$('#mg-commands').fadeOut();
		$('#grid_in tr').removeClass('row-selected');
		$(this).find('div.row-checked').fadeOut();              
          }
    }, 50);
});

$('#grid_in').hammer({time: 1000, domEvents: true}).on('touchend', 'tr', function (evt) {
    $('#grid_in').addClass("clickedOnMe");

Open in new window

0
 
LVL 31

Author Comment

by:Marco Gasi
ID: 41901766
This second snippet looks interesting. I'll give it a try for sure. Thank you again!
1
 
LVL 31

Author Closing Comment

by:Marco Gasi
ID: 41907014
Thank you for having been with me: talking with someone often hepls enough even without a solving answer. It helps to think clearly :)
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Learn by example how to specify CSS selectors for Selenium WebDriver test automation software.
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
Any person in technology especially those working for big companies should at least know about the basics of web accessibility. Believe it or not there are even laws in place that require businesses to provide such means for the disabled and aging p…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

896 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

16 Experts available now in Live!

Get 1:1 Help Now