Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Boris Kamp
Boris Kamp
16,660 Points
Posted by Boris Kamp
Boris Kamp
16,660 Points

event for touchscreen

Hi guys!

I have an element hidden by default and show when a user hovers over this element with the mouse. On touchscreens, this event is only fired when the element is clicked. What Im looking for is a way to make this show as soon as the user's finger touches that element, I can't seem to find an event like that.

Is there anybody who has done this?

1 Answer

Henrik Hansen
Henrik Hansen
23,176 Points
Henrik Hansen
Henrik Hansen
23,176 Points

You are probably looking for the :active pseudo class. Also, there are touch event if you want to use JavaScript. (https://developer.mozilla.org/en-US/docs/Web/API/Touch_events)

Boris Kamp
Boris Kamp
16,660 Points
Boris Kamp
Boris Kamp
16,660 Points

Thanks for your answer @henrikhansen ,

I found :active to not work, I tried the following javascript without success either:

//OnTouch event for about text
    $('#about thumbnail').on('touchstart', function(){
        $(this).find('.mask').addClass('touch');
    }).on('touchend', function(){
        $(this).find('.mask').removeClass('touch');
    });

any clues?

Henrik Hansen
Henrik Hansen
23,176 Points
Henrik Hansen
Henrik Hansen
23,176 Points

http://www.w3schools.com/jquerymobile/jquerymobile_events_touch.asp - something to try, but it is jQuery Mobile.

I suspect that jQuery doesn't have the "touchstart" and the others from MDN. You should go "pure" javascript here and use addEventListener().

Boris Kamp
Boris Kamp
16,660 Points
Boris Kamp
Boris Kamp
16,660 Points

Sorry for my delayed answer Henrik, the link you gave it not what I'd like to achieve either, you really have to 'tap' the item to fire an event, I need to fire it on the slightest 'touch' with a finger

are you suggesting I need to include jquery mobile library for my previous code to work? or go pure js?