What is preventing the onmouseup event from being effective?

In my recent research, I came across some interesting information on mouse-click events from w3schools. According to them, the onmousedown, onmouseup, and onclick events are all crucial parts of a mouse-click process. It starts with the onmousedown event being triggered when a mouse-button is clicked, followed by the onmouseup event being triggered when the mouse-button is released, and finally, the onclick event is triggered upon completion of the mouse-click.

After reading this, I decided to test it out myself by writing some code. However, I noticed that the onmouseup event never seems to happen as expected. Even though the text 'Clicked' is displayed after releasing the click, the message "Thank You a lot" never appears. Can anyone provide some insight into why this might be happening? Thank you in advance.

<!DOCTYPE html>
<html>
<body>

<div onmousedown="mDown(this)" onmouseup="mUp(this)" onclick = "mClick(this)" style="background-color:#D94A38;width:90px;height:20px;padding:40px;">Click Me</div>

<script>
function mClick(obj)
{
    obj.style.backgroundColor="#ec5ead";
    obj.innerHTML="Clicked"
}
function mDown(obj)
{
    obj.style.backgroundColor="#1ec5e5";
    obj.innerHTML="Release Me"
}

function mUp(obj)
{
    obj.style.backgroundColor="#FFFFFF";
    obj.innerHTML="Thank You a lot"
}
</script>

</body>
</html> 

Answer №1

When the mouseup event triggers, it is quickly followed by the click event causing the thankyou message to be missed. By removing the onclick handler, you will be able to view the message without interruption.

Answer №2

When you press the mouse button down and then release it while on the same element, that action is considered a click event. Although the mouseup event triggers first, the ultimate outcome is the click event.

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

Steps to retrieve a value from a promise function

My current challenge involves a function that verifies whether a device is online. Take a look at the code snippet below. const ping = require('ping'); export function checkDeviceStatus(device) { try { const hosts = [device]; let resul ...

What is the best way to pass information from a child component to a parent component in ReactJS?

I am currently working on a project to develop a website that can adjust recipes for different serving sizes. Utilizing React, I have set up a component to handle the original servings, new servings, and number of ingredients. However, I am facing an issue ...

JavaScript - Calculate the streak of consecutive work days

Consider this array of plans: [ { _id: "1", project_id: "1", day: "2021-03-02" }, { _id: "2", project_id: "1", day: "2021-03-01" }, { _id: "3", project_id: "1", day: "2021-03-03" }, { _id: "4", project_id: "2", day: "2021-03-01" ...

Converting JavaScript JSON into a PHP array

When working with Javascript, I create an array using the following code: cachePHP = "'lat':'" + (Number(upDataItems[2])).toFixed(5)+"'"; cachePHP = cachePHP + ",'lon':'" + (Number(upDataItems[3])).toFixed(5)+"' ...

Error encounter when loading the chunk for FusionCharts's overlappedbar2d.js in React.js: fusioncharts.overlapped

Currently, I am working on a web application that utilizes next.js and FusionCharts. Within the app, various FusionChart types have already been set up. My task now is to integrate the Overlapping Bars chart as outlined in the following documentation: How ...

Issues with Loading Bootstrap JavaScript on Basic "Hello World" Project

I am experiencing an issue where the JavaScript code is not displaying on my website. I have checked the inspect element sources and it seems to load correctly, but for some reason, it is not being applied. Any insights on why this might be happening? Than ...

What is the best way to merge arrays based on their indexes in Javascript?

I am facing a challenge with two 2d arrays: var ar1 = []; var ar1[0] = []; var ar1[0][0] = 1; var ar1[0][1] = 2; var ar1[1] = []; var ar1[1][0] = 3; var ar1[1][1] = 4; var ar2 = []; var ar2[0] = []; var ar2[0][3] = 5; var ar2[0][4] = 6; var ar2[1] = []; ...

Updating a property on an object during iteration

Currently, I am in the process of developing a Single Page Application using Laravel on the backend and Vue.js. I have two arrays that are crucial to my project: The first array is accessArray: ["BIU","CEO","Finance","HRD","Group"] The second array is a ...

In my app.post request in node.js and express, the body object is nowhere to be found

Having an issue with node.js and express, trying to fetch data from a post request originating from an HTML file. However, when I log the request, the req.body object appears empty. I've added a console.log(req.body) at the beginning of my app.post(" ...

Unable to See Success Notification on First Attempt

I am facing an issue with displaying a message when adding a new record. The first time I add a record, the message shows up correctly. However, if I try to add another record, the message does not appear even though the record is added successfully. Here ...

An obstacle prevents the code injection process in the Chrome extension when a button is pressed

My basic chrome extension is not functioning correctly. More specifically, I am encountering an issue where the alert box does not appear when I click on the button in the popup. Here are the contents of my manifest.json file: {"manifest_version": 2, "n ...

Is there a way to fetch database content using ajax prior to triggering a filter keyup event?

I have encountered a challenge with my code below. It currently works when a filter parameter is pressed on keyup. However, I am looking to have the content of the database load via ajax as soon as the page is ready, even without any filter search being in ...

Javascript does not have the capability to parse JSON

Received a JSON response from a PHP file: [ { "color": "black", "product_name": "Prod2", "revision": "apps/" }, { "color": "green", "product_name": "Prod1", "revision": "dev/" } ] (successfu ...

Attempting to employ $set in conjunction with stringify, unfortunately without success

I am currently trying to utilize this function to edit a specific space in my MongoDB database. However, being new to this, I am struggling to understand what is going wrong. The error message "missing ) after argument list" keeps appearing. Any help and ...

Issue with Material-ui Autocomplete: onChange event not firing when value is updated in onHighlightChange

I have been customizing Material UI's Autocomplete by adding a feature that allows users to move options to the input using keyboard events (Arrow keys up and down). Then, the user should be able to select an option by pressing the ENTER key. I am fa ...

What could be causing the issue with retrieving HTTP requests in Nest.js even after configuring the controller?

After the individual who departed from the company utilized Nest.js to create this server-side system. They established the auth.controller, auth.service, auth.module, auth-token, jwt.strategy, and jwt-payload, with everything properly configured. I verifi ...

Odd behavior observed while running npm scripts in the npm terminal

Included in my package.json file are the following dependencies: "devDependencies": { "chromedriver": "^2.37.0", "geckodriver": "^1.11.0", "nightwatch": "^0.9.20", "selenium-server": "^3.11.0" }, "scripts": { "e2e": "nightwatch -c test ...

Learn how to incorporate conditions into your mapping function in React to retrieve a single result

Hello everyone, I have a task where I need to compare two collections. If the comparison returns true, I want to display solved, otherwise I want to display Available. First collection : (5) [{…}, {…}, {…}, {…}, {…}] 0: creatorUserI ...

The Axios request for the concatenated URL is failing to execute

Encountering an issue with Axios in node js. Here's the code snippet: let callResult = await axios.get(urlData, config) The configuration object used is as follows: let config = { headers: { 'X-Token': token } ...

Here is how you can pass two callback functions to React.cloneElement:

Recently, I encountered an issue where one of the callbacks passed to a child component using React.cloneElement was always present while the other was undefined. Specifically, activeRow was consistently available but deactivateRow remained undefined. I ...