Ask coding questions

← Back to all posts
Mouse down
Coder2404 (361)

How do you detect mouse down?

Answered by RYANTADIPARTHI (6001) [earned 5 cycles]
View Answer
Comments
hotnewtop
Coder2404 (361)

But I still appreciate you trying @RYANTADIPARTHI

RYANTADIPARTHI (6001)

@Coder2404 ok, you can't detect mousedown in HTML, but you can in js. IT's easy. Try this link.

https://stackoverflow.com/questions/322378/javascript-check-if-mouse-button-down

Coder2404 (361)

I have been making a website: https://html-tutorial.coder2404.repl.co/ (don’t mind the name) and if you view it the website, there is a “about me text but it’t NOT clickable, so what I’m trying to say is can you help me make it clickable and lead to another page of my website?

RYANTADIPARTHI (6001)

@Coder2404 oh ok. In that case, make it a link.

<a href="somefile">About</a>

like that. In the href, put a file, or where you want it to go.

there, it's clickable..

Coder2404 (361)

Yeah I know but I don’t know how to make another page of my website @Kai_Justice

Kai_Justice (221)

@Coder2404 Create a new '.html' file, then link to it like so.

RYANTADIPARTHI (6001)

@Coder2404 make a new file called something.html, then in your index.html file, put this code.

<a href="something.html">About</a>

like that.

InvisibleOne (2687)

Just use this to link it to another file:

<!-- this should work with any tag, I just used <p> -->
<p onclick="window.location.href='YOUR_OTHER_HTML_FILE.html'">Click me to go to another HTML file!</p>

@Coder2404

tussiez (1515)

@RYANTADIPARTHI you can do mousedown event in HTML

<img src="rickroll.gif" onmousedown="alert('Haha rickroll')">
xxpertHacker (861)

@tussiez That's JS, not HTML. Just because it's inlined doesn't mean it's not JS anymore.

KENNETHTRIPP (50)

@RYANTADIPARTHI Actually HTML can detect clicks. <p onclick="function()">Hello, World!</p> It just needs js too.

Coder2404 (361)

@KENNETHTRIPP Thanks for telling me that!

KENNETHTRIPP (50)

@Coder2404 Oh, I wasn't expecting you to mark that correct. I was just pointing out that HTML could detect clicks.

Baconman321 (1059)

@InvisibleOne you almost have it right (you have to wrap it in a function). However, it would be better to wrap an event listener (onmousedown will get replaced if another script decides to use the onmousedown function).

document.body.addEventListener("mousedown",function(evt){
   console.log("MOUSE DOWN, I REPEAT... THE MOUSE IS DOWN!!!");
});

Note that addEventListener doesn't have "on" in the name. This is different from document.body.onmousedown in that the event listener adds a new one while changing document.body.onmousedown will replace the previous function.

Bookie0 (5988)

Check this and this too!

(According to w3 schools:

<!DOCTYPE html>
<html>
<body>

<p>This example demonstrates how to assign an "onmousedown" and "onmouseup" event to a p element.</p>

<p id="demo" onmousedown="mouseDown()" onmouseup="mouseUp()">Click me.</p> <!-- when mouse is down calls mouseDown() function

when mouse is up calls mouseUp() function
-->

<script> <!-- in script tag, or js file -->

function mouseDown() { <!-- when mouse is down -->
  document.getElementById("demo").innerHTML = "The mouse button is held down."; <!-- outputs that message -->
}

function mouseUp() {  <!-- when mouse is up -->
  document.getElementById("demo").innerHTML = "You released the mouse button.";<!-- outputs that message -->
}
</script>

</body>
</html>

(But check the w3 schools link for more precisions! :)

tussiez (1515)

mousedown event

Here's how to attach the mousedown event to an element in JavaScript:

element.addEventListener('mousedown', function(event) {
//run some code here..
});
// element can be any DOM element, e.g document.body
tussiez (1515)

@tussiez Or.. in HTML

<img src="rickroll.gif" onmousedown="alert('Haha rickroll')">
Coder2404 (361)

I appreciate your skills :) @tussiez

Coder2404 (361)

Is there a way that I can contact you for more help, if you feel uncomfortable @tussiez then you don’t have to tell me.

tussiez (1515)

Use @ and the user's name to "ping" someone. This makes your comment appear in Repl.it notifications and their email.
E.g @Coder2404 makes this comment show up in your notifications.

Coder2404 (361)

Oh ok, thanks for helping me learn something [email protected]

tussiez (1515)

Np! Also for the ping to work I think you need to put a space before it, like this:
incorrect: [email protected] correct: ! @Coder2404
I may be wrong tho since the ping worked here

Coder2404 (361)

I think this is right because it’s the color blue @tussiez

Coder2404 (361)

Why is there numbers next to your ping, it says “(602)”and mine’s says (0).And what does it represent? @tussiez

tussiez (1515)

@Coder2404 () is how many cycles you have, which are useless internet points. You earn them when someone upvotes your comments or posts. Now that I have upvoted your comment, you will have 1 cycle.

Coder2404 (361)

Thanks for giving me one cycle! And do you mind if we become friends? @tussiez

InvisibleOne (2687)

I think its document.body.onmousedown = console.log("The mouse is down") but I'm not sure if that works

Coder2404 (361)

I don’t think it worked @InvisibleOne

Zavexeon (1188)

@InvisibleOne You were close.

document.body.onmousedown = () => {
    // what to do when mouse is clicked
}
InvisibleOne (2687)

Try this:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>repl.it</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <button onmousedown='console.log("mouse is down")' onmouseup='console.log("mouse is up")'>Click me</button>
    <script src="script.js"></script>
  </body>
</html>

@Coder2404

InvisibleOne (2687)

So it needs to be a function? @Zavexeon

Zavexeon (1188)

@Coder2404 Did you just put it in the HTML directly?

Try putting it in between script tags:

<script>
    document.body.onmousedown = () => {
 
    }
</script>