Change element css only on mouse down event with jquery

Question

I want to change a div css only on mousedown event with jQuery.

$('#xxx').mousedown(function (e) {
    $("#xxx").animate({
        height: '600px',
        width: '600px'
    }, 'slow');
})

The problem is that it runs on mouse click too and I want event called only on mousedown event.

The mousedown event is sent to an element when the mouse pointer is over the element, and the mouse button is pressed. — Alexandre Ribeiro, Jun 05 '19 at 08:37
Click is also a `mousedown` event. It send `mousedown` first and `mouseup` next. — Andrei Konstantinov, Jun 05 '19 at 08:38
Given that a `click` is made up of a `mousedown` followed by a `mouseup`(on the same element) it's hard to understand what the issue is, or even how you're expecting this to work. — Rory McCrossan, Jun 05 '19 at 08:39
on the `mousedown`, start a `setTimeout`, then on `mouseup` cancel that timeout. Ensure the timeout is longer than the click time (500ms?) — freedomn-m, Jun 05 '19 at 09:00
Possible duplicate of [Differentiating between mouseup mousedown and click](https://stackoverflow.com/questions/19597607/differentiating-between-mouseup-mousedown-and-click) — freedomn-m, Jun 05 '19 at 09:00

score -2 · Answer 1 · edited Jun 05 '19 at 08:40

-2

Use mouseover() or maybe .focus( handler )

edited Jun 05 '19 at 08:40

answered Jun 05 '19 at 08:39

Alexandre Ribeiro

1

I fail to see how pointing at an element is a suitable replacement for pointing at it and then holding the mousedown (unless there was timeout where it started after you were hovering for a certain time, but that's not what's advocated here). Especially given that the action is an 'expand this' which would be horrendous UX if you're trying to point at an item in the middle of 50 others and to get there you have to endure 10+ items all jumping about as you move your mouse to the one you actually want to see. – freedomn-m Jun 05 '19 at 09:10

1 Answers1