Click and hold event Javascript

Question

I havent gotten started on the project I'm going to be working on, but in planning I'm having trouble figuring out a click and hold event issue.

I am going to be having a click through div (a div that is over the image element, yet I can still click on the image) with an opacity somewhere around 0.7 with an image below it. I will be able to click on the image and move it around on a canvas (basically just move it from one side of the canvas to the other).

Does anyone know of a way to create a click and hold event where when I am clicking on the image to move it on the canvas, the click through divs opacity becomes 0 (or the div become hidden all together), then when i un-click it goes back to 0.7?

Thanks!

`mousedown` and `mouseup` events? – jfriend00 Jul 14 '15 at 05:32 — jfriend00, Jul 14 '15 at 05:32
by saying *canvas* you mean a HTML5 ` – Roko C. Buljan Jul 14 '15 at 05:50 — Roko C. Buljan, Jul 14 '15 at 05:50

Rino Raj · Accepted Answer · 2015-07-14T06:29:30.443

1

Please try this

I have created a DEMO . This is what I understood from your question. If this is not what you meant please add some html or code you have tried so that its easy to understand your problem.

$(document).ready(function(){
    $("img").mouseup(function(){
        $("#containment-wrapper").css("background-color", "black");
    });
    $("img").mousedown(function(){
        $("#containment-wrapper").css("background-color", "white");
    });
});

edited Jul 14 '15 at 06:29

answered Jul 14 '15 at 05:49

Rino Raj

6,264
2
27
42

Hey thanks for doing this! this actually not that part the question is about. I wish i had enough points to put an image up I could easily explain it that way. Basically image that I have a div that takes up the entire width and height of the browser, its black, and slightly opaque. underneath that div i have an image (the image is clickable though the black opaque div). When I click on that image I want the black (top) div to be hidden (or opacity: 0) and when I un-click I want the opacity to go back to the original opacity. – Midi_ Jul 14 '15 at 06:07
@Midi_ I have updated the code. Verify my latest "DEMO" – Rino Raj Jul 14 '15 at 06:30
Thank yo so much Rino! I didn't know about the mouseup mousedown functionality. I really appreciate it, this is exactly what I was looking for! Have a great day! – Midi_ Jul 15 '15 at 04:23

score 0 · Answer 2 · answered Jul 14 '15 at 05:42

What about jQuery's https://api.jquery.com/mousemove/ ? In the Doc they have an example how to bind the even to a target:

$( "#target" ).mousemove(function( event ) {
    var msg = "Handler for .mousemove() called at ";
    msg += event.pageX + ", " + event.pageY;
    $( "#log" ).append( "<div>" + msg + "</div>" );
});

Click and hold event Javascript

2 Answers2

Linked