Adding an event listener to detect left or right mouse clicks - using onclick doesn't capture right clicks

Question

Adding an event listener to detect left or right mouse clicks - using onclick doesn't capture right clicks

I'm currently in the process of applying for an Internship through this Internship Link

One thing that caught my attention right away is the issue with uploading or pasting a cover letter. When attempting to upload or paste a cover letter, it redirects me to the homepage of the job invite site Job Invite, preventing the submission of a cover letter. However, the upload resume feature works smoothly while the paste resume option encounters the same problem.
Does anyone have any suggestions on how to fix this and successfully submit a cover letter?

Although I'm not an expert in web development, as I'm applying for an engineering position, I'm trying to troubleshoot this issue. By inspecting the element linked to the upload cover letter function, I discovered:

onclick="jvAddAttachment2('jvcoverletter', 'qLY9Vfwx')

This function gets triggered upon clicking the button. To investigate further, I accessed the JavaScript file for this webpage: Inspect Element -> Sources -> *careers_8.js?v=303. I attempted adding a basic alert statement, following guidance from W3Schools, for debugging purposes. Here's the updated code:

function jvAddAttachment2(id, companyId){
    alert("I got here");
    ....
}

After saving the changes (ctrl + s), the Inspect Element console confirmed "Recompilation and update succeeded." However, when I clicked the link (via right-click and open new window), the alert box did not appear.
Does anyone know how to make the alert dialog show up? I've tried my best with the knowledge obtained from a single web development course haha.

javascript html css forms web-inspector

Answer 1

Answer №1

If you want to trigger an action on right click, you should use the contextmenu event:

element.addEventListener('contextmenu', function() {
  // insert your code here
});

Avoid using inline JavaScript like onclick in your HTML. It is recommended to attach event listeners the proper way as shown above.

To reference an element in JavaScript, use

document.getElementById('the-id')

or similar functions like document.querySelector.

You can attach both left and right click events to an element like this:

// left click
myElem.addEventListener('click', myFn);
// right click
myElem.addEventListener('contextmenu', myFn);

If you prefer using inline JavaScript, you can do it like this:

<div onclick="myFn()" oncontextmenu="myFn()"></div>

I have provided a full demo showcasing both approaches:

var myElem = document.getElementById('my-element');
myElem.addEventListener('click', myClickFn);
myElem.addEventListener('contextmenu', myClickFn);

function myClickFn() {
  console.log('this is myClickFn!');  
}

function someFn() {
  console.log('this is someFn!');  
}

<div id="my-element" onclick="someFn()" oncontextmenu="someFn()">Left or Right click me!</div>

If you need to pass parameters to the function called on click, create an intermediary function that calls the target function with the specified parameters:

function myClickFn() { 
  myOtherFunction('some', 'params');
}

This approach helps avoid repetition when passing parameters to the function in different places.

Answer 2

If you want to trigger an action on right click, you should use the contextmenu event:

element.addEventListener('contextmenu', function() {
  // insert your code here
});

Avoid using inline JavaScript like onclick in your HTML. It is recommended to attach event listeners the proper way as shown above.

To reference an element in JavaScript, use

document.getElementById('the-id')

or similar functions like document.querySelector.

You can attach both left and right click events to an element like this:

// left click
myElem.addEventListener('click', myFn);
// right click
myElem.addEventListener('contextmenu', myFn);

If you prefer using inline JavaScript, you can do it like this:

<div onclick="myFn()" oncontextmenu="myFn()"></div>

I have provided a full demo showcasing both approaches:

var myElem = document.getElementById('my-element');
myElem.addEventListener('click', myClickFn);
myElem.addEventListener('contextmenu', myClickFn);

function myClickFn() {
  console.log('this is myClickFn!');  
}

function someFn() {
  console.log('this is someFn!');  
}

<div id="my-element" onclick="someFn()" oncontextmenu="someFn()">Left or Right click me!</div>

If you need to pass parameters to the function called on click, create an intermediary function that calls the target function with the specified parameters:

function myClickFn() { 
  myOtherFunction('some', 'params');
}

This approach helps avoid repetition when passing parameters to the function in different places.

Answer 3

Answer №2

Ensure you properly close your onclick string with a ":

onclick="jvAddAttachment2('jvcoverletter', 'qLY9Vfwx')"

Remember to use left click instead of right click.

Answer 4

Ensure you properly close your onclick string with a ":

onclick="jvAddAttachment2('jvcoverletter', 'qLY9Vfwx')"

Remember to use left click instead of right click.

Answer 5

Answer №3

 onclick="jvAddAttachment2('jvcoverletter', 'qLY9Vfwx')"

I noticed that the double quotation was missing.

view demo

Answer 6

 onclick="jvAddAttachment2('jvcoverletter', 'qLY9Vfwx')"

I noticed that the double quotation was missing.

view demo

Adding an event listener to detect left or right mouse clicks - using onclick doesn't capture right clicks

Answer №1

Answer №2

Answer №3

Similar questions

Can a promise be safely resolved more than once?

"Implementing a consistent body border design on all pages using CSS for print media

What is the best way to retrieve the parent element quickly using Jquery?

What are the different applications of npm packages?

Javascript navigation menu failing to accurately display all pages

Support for h264 in Windows Media Player across various versions of Windows operating system

Angular 8 carousel featuring a dynamic bootstrap 4 design with multiple images and cards displayed on a single slide

Maintaining Order with SCSS and Compass - Is it Possible?

CSS Alignment in React with Material UI

The log indicates that there are two distinct IP addresses associated with the user

Make sure to close all your tags properly in PHP

How to display a PDF in a web browser using PHP

Expansive Offspring Division stretching to the Entire Vertical Length of its Guardian Division

Every time I try to set up the MailChimp pop-up javascript, I encounter an Uncaught Error message saying that Bootstrap tooltips need Tether and an Uncaught ReferenceError message

The redirect link to Facebook Messenger is functional on desktop browsers but experiences difficulties on mobile browsers

Adjusting the size and location of the current browser window using jQuery

JavaScript does not function properly when interacting with the result of a POST request made through $.ajax

Converting XML schema to JSON format using Node.js

Looking to determine if a specific element is assigned multiple class names

The Node.js Express server seems to be having trouble accessing static files