Creating touch screen / tablet friendly jQuery mouseleave events

I am currently working on a modal box that fades in when the mouse hovers over it and fades out when the mouse leaves. However, I have encountered an issue with touch screen devices like tablets where the modal does not fade out once it is displayed on the page. Is there a way to adjust this code so that whenever a user touches outside the modal box, it will fade out?

$(".tiptrigger").mouseenter(function() { 

    var s_id = $(this).attr('id'); // There may be more than one per page
    $("#tiptip_holder-"+s_id).fadeIn("fast");   

}); 

$(".tiptrigger").mouseleave(function() { 

    var s_id = $(this).attr('id');
    $("#tiptip_holder-"+s_id).fadeOut("slow");

});
javascriptjqueryhtmlcss

Answer №1

If you want to implement touch events, you can give this a try (although it's not tested):

$('.tiptrigger').on('mouseenter touchstart', function(){ 
    var s_id = $(this).attr('id'); // Remember there could be more than one on the page
    $("#tiptip_holder-"+s_id).fadeIn("fast"); 
});

$('.tiptrigger').on('mouseleave touchend', function(){
    var s_id = $(this).attr('id');
    $("#tiptip_holder-"+s_id).fadeOut("slow");
});

REVISED VERSION

You may attempt the following approach:

$('.tiptrigger').on('mouseenter touchstart', function(e){ 
    var s_id = $(this).attr('id'); // Multiple instances could exist per page
    $("#tiptip_holder-"+s_id).fadeIn("fast"); 
    e.stopPropagation()
});

$('.tiptrigger').on('mouseleave', function(e){
    var s_id = $(this).attr('id');
    $("#tiptip_holder-"+s_id).fadeOut("slow");
});

$('body').on('touchstart', function(e){ 
    $("div[id^='tiptip_holder']").fadeOut("slow");        
});

Answer №2

Mouse events like mouseover, mouseout, mousedown, mouseup, and mousemove are tailored for mouse input devices, while the keyboard operates with keydown, keypress, and keyup. Touch screens use touchstart, touchmove, touchend, and touchcancel. Additionally, Webkit on Apple devices features specific gesture start/move/end events.

It's important to consider the device being used when coding to ensure proper event handling based on the device type.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is it more advantageous in Vue to pre-process and save data directly to the data property, or to utilize computed properties?

I am interested in hearing diverse perspectives on this topic. When working with Vue (and possibly other frameworks), is it more beneficial to prepare non-reactive data through a method and store it in the data for use in the template, or is it preferable ...

javascriptvue.js

What's the best way to format text as bold in a .ts file so that it appears as [innerText] in the HTML section?

When looking to emphasize specific text without using [innerHTML], what is the alternative method besides the usual line break changes in the interface? How can we make certain text bold? For instance: .ts file string = This is a STRING bold testing.&bso ...

javascripthtmlangularboldinnertext

The selected option in the select dropdown has an erroneous attribute value

Looking to create a select element that displays all the options from an enum and allows for updating a database value based on selection. Here's how it can be achieved: export enum SubscriptionEnum { DAILY= 'DAILY', ANNUAL= 'AN ...

javascripthtmlangular

Structuring Server Side Code with Node.js and Express

I am faced with the task of restructuring my server and its components. My goal is to streamline the process by segregating different functionalities. app.post("/login", function(request, response) { }); app.post("/register", function(request, response) ...

javascriptnode.jsexpress

Why does the event handler capture multiple clicks when $.click() is triggered more than once for the same link?

My code looks like this: function init(){ $('.btn').click(function(){ //do something; } } Whenever new content is loaded via ajax, I make a call to init() to ensure the click event applies to the new buttons. However, each time I click ...

javascriptjqueryajaxonclickbuttonclick

issue with eval() function

I am attempting to convert a JSON string from my .php file using the eval() function, but it is not working. The browser console shows a SyntaxError: expected expression, got '<'... However, when I comment out the line where eval() is used an ...

javascriptphpjqueryjson

Add a new string to a class within a Vue.js component

Hey there, currently working on a Vue component where I am iterating through a list of countries. Here's how it looks: <div v-for="i in countries" :key="i.id"> {{i.name}} <span class="flag-icon-gr"></span> I want to dynamically ...

cssvue.jsnuxt.js

If the indexed date is unchanged, the default date will remain consistent with the date the process was initiated

const saleSchema = new Schema ({ ... date: {type: Date, 'default': Date.now, index: true} ... }) Despite attempting to add the current date into the database using the date() function, it is consistently matching the initial indexed date an ...

javascriptdatabasemongodbexpressmongoose

The newly added radio button does not function as a separate group as expected

I currently have a set of radio buttons: <input type="radio" class='form-control' name="progress_type[]" value="Journal Papers"><span class='radio-label'>Journal Paper</span> <input type="radio" class='form-co ...

javascriptjqueryhtmlradio-button

Is there a way to shift the page footer and bar down to the very bottom of the screen?

Is it possible to move the footer and footer bar to the very bottom of the page instead of just under the contents? I'm currently using the Sydney theme for WordPress and want the footer to sit across the bottom of the full-screen image. .footer-wid ...

csswordpressposition

Troubleshooting FabricJS: Object manipulation is disabled until a common selection is made

I am currently in the process of developing a product configurator with Vue and FabricJS. To set up my canvas, I used this.canvas = new fabric.Canvas("canvas"); <template> <div id="wrapper"> <div id="left"></div> &l ...

javascriptvue.jscanvascontrolsfabricjs

Create a canvas and include input boxes in an HTML document

I'm attempting to create a canvas line diagonally above two textboxes that are also positioned diagonally (similar to Samsung's pattern passcode) when a button is clicked, but I am facing difficulties in achieving this. I have attempted to solve ...

javascripthtmlcss

A technique to trigger the display of a detailed grid by clicking in the master section

Currently, I am in the process of creating a reusable master-detail grid component using Backbone. My goal is to incorporate an event that triggers the loading of the detail grid whenever a user clicks on a row within the master grid. However, I am facin ...

javascriptjquerybackbone.js

What is the best way to create a JavaScript array after fetching data from an AJAX request that returns a JSON array?

When I make an ajax call that returns JSON data, my goal is to extract and organize this data into a new JavaScript array through looping. This is a snippet of the JSON data returned: { query: [ ], products: 
[ 
{ title: "title 1", ...

javascriptajaxarraysjsonloops

Open the menu directly on the visible screen or current location of the webpage when the sticky button is clicked

I have been working on creating a navbar that will scroll down upon clicking a button. Everything seems to be functioning correctly, except for one issue that I can't seem to figure out. The problem is that when my sticky navbar is clicked while at th ...

javascripthtmljquerycss

Utilize various addMethods on a field in the event a radio button is chosen through the jQuery validator plugin

When a specific radio button value is selected, I need to apply different methods to a single field. If "true" is selected, method X should be applied. If "false" is selected, method Y should be used on the same field. I attempted to achieve this with a ...

javascriptjqueryhtmljquery-validate

Creating side by side input panels with Bootstrap version 3.1 on Internet Explorer 8

Although I have some familiarity with Bootstrap, my experience with it is limited. While attempting to create a static form using Bootstrap, I encountered difficulties getting panels to align side by side using the "col-md-6" class within rows. Despite my ...

htmlcsstwitter-bootstrap

Utilize datetime values in chartjs ajax for data visualization

I'm currently working on creating a chart using chart.js. I have php code that retrieves datetime data through an ajax call. However, the chart is not displaying any data and there are no visible errors. I've checked the php code using console.lo ...

javascriptphpmysqlajaxchart.js

Inquiry on integrating Spotify with Axios for my debut solo project (beginner inquiry)

I have a question regarding my first solo project in React. I started learning code in September and I'm facing an issue while making a POST request to the Spotify API to retrieve an access token: Despite following the recommended 'Content-Type& ...

javascriptreactjsaxiosspotify

Activate the button to effortlessly load pages with a visually engaging animation

I have been facing a problem for the past couple of days. I need help with achieving a specific functionality on my website. When button1 is clicked, I want to load the page in a div class named "loadpage" with an animation coming from the left. Similarl ...

jquerycssajaxhtml