Firing a jQuery event at precise mouse coordinates

Question

Firing a jQuery event at precise mouse coordinates

I am facing a unique challenge with my website design - I have implemented a semi-transparent header and footer, and now I need to capture click and hover events in order to trigger the same event on a different DOM element at the exact mouse location.

While I have managed to successfully retrieve the mouse coordinates using the code snippet below, attempting to trigger the same event with $("#container").trigger(e); has not yielded the desired result.

        $("#header, #footer").click(function(e){
          //only intercept click if it did not fall on an a tag
          if(!$(e.target).is("a")){
            e.preventDefault();
            $("#container").trigger(e); //does not work
            alert(e.pageX +', '+ e.pageY); //works
            return false;
          }
        });

jquery html css

Answer 1

Answer №1

After spending a significant amount of time researching the jQuery documentation, I was able to develop a solution that successfully works. Shout out to @Gaby and @brad for their valuable input!

//monitor clicks and mouse movements in the header/footer
//and pass events through to the content div as needed
$("#header, #footer").bind("click mousemove", function(e){  
    //only intercept event if it didn't occur on an "a" tag 
    //within the header/footer
    if(!$(e.target).is("a")){
        e.preventDefault();
        $("#container").trigger(e);
        return false;
    }
});

$("#container").bind("click mousemove", function(e){  
    e.preventDefault();  
    //retrieve the coordinates of all "a" descendants within #container  
    $(this).find("a").each(function(){   
        var pos = $(this).offset();  
        var height = $(this).height();
        var width = $(this).width();
    
        if((e.pageX >= pos.left && e.pageX <= (pos.left + width))
           && (e.pageY >= pos.top && e.pageY <= (pos.top + height))){
            //trigger hover effect if event is mousemove
            if(e.type == "mousemove"){
                $(this).css("text-decoration", "underline");
            } else {
                window.location = $(this).attr("href");
            } 
        }
    });
    //prevent event propagation
    return false;
});

Answer 2

After spending a significant amount of time researching the jQuery documentation, I was able to develop a solution that successfully works. Shout out to @Gaby and @brad for their valuable input!

//monitor clicks and mouse movements in the header/footer
//and pass events through to the content div as needed
$("#header, #footer").bind("click mousemove", function(e){  
    //only intercept event if it didn't occur on an "a" tag 
    //within the header/footer
    if(!$(e.target).is("a")){
        e.preventDefault();
        $("#container").trigger(e);
        return false;
    }
});

$("#container").bind("click mousemove", function(e){  
    e.preventDefault();  
    //retrieve the coordinates of all "a" descendants within #container  
    $(this).find("a").each(function(){   
        var pos = $(this).offset();  
        var height = $(this).height();
        var width = $(this).width();
    
        if((e.pageX >= pos.left && e.pageX <= (pos.left + width))
           && (e.pageY >= pos.top && e.pageY <= (pos.top + height))){
            //trigger hover effect if event is mousemove
            if(e.type == "mousemove"){
                $(this).css("text-decoration", "underline");
            } else {
                window.location = $(this).attr("href");
            } 
        }
    });
    //prevent event propagation
    return false;
});

Answer 3

Answer №2

According to the documentation for trigger, it requires a string as the parameter. However, you seem to be passing it the actual event object, like this:

$("#container").trigger(e.type);

This should work if you have already bound an event to #container, like so:

$("#container").bind('click', function(e){ //do something });

Meaning, you've already connected the click event to the #container element.

Answer 4

According to the documentation for trigger, it requires a string as the parameter. However, you seem to be passing it the actual event object, like this:

$("#container").trigger(e.type);

This should work if you have already bound an event to #container, like so:

$("#container").bind('click', function(e){ //do something });

Meaning, you've already connected the click event to the #container element.

Firing a jQuery event at precise mouse coordinates

Answer №1

Answer №2

Similar questions

Rendering SVG graphics on browsers for Android devices

I am having difficulty retrieving the JSON object that was sent by the servlet

Switch the selected option in JQuery UI dropdown using a clickable button

My wish is for the animation to activate when hovering over an "a" element on the progress bar

The Python CGI script fails to run

Guide on displaying Solr Documents returned using the Jquery Autocomplete plugin

Strange behavior in Angular controllers

Modifying a css class via javascript

Creating a PDF of a dynamic PHP webpage

Creating a jQuery alertbox that is triggered by specific elements in an anchor tag

Check if the Datatable is empty using an alert

Obtaining JSON encoded outcomes with jQuery/PHP ajaxForm

Turn off scrolling but allow dragging on iPhone

What is the process of transferring an object to a different scope by utilizing checkboxes and Ajax?

Tips for obtaining a binary file sent through an HTTP:POST request using angular.js

The resizing of the window does not occur when a scrollbar is automatically added in IE11

Incorporating html content into an MVC webpage using jQuery - is it

How to efficiently structure CSS columns using Div elements within a Bootstrap card

How can I fetch a value from a database and set it as the selected option in a

Assistance required for locating elements in Selenium using Css Selector