CODEWITHSUNDEEP
jquery
Leahcim
Leahcim

Reputation: 41919

jQuery: mouseup and mousedown click handlers

I'm trying to replace the text of the lastClick div on the mouseup and mousedown events, but this code is not working. Any suggestions? 

$('document').on(

{mousedown: function(){ $('#lastClick').html('down');}}, 

{mouseup: function(){$('#lastClick').html('up');}}

);

HTML

<body>
<div id='lastClick'>not clicked yet!</div>
</body>

Upvotes: 2

Views: 2644

Answers (4)

Codegiant
Codegiant

Reputation: 2150

try this

HTML

<body>
   <div id='lastClick'>not clicked yet!</div>
</body>

JS CODE

$(document).ready(function(){
   $('#lastClick').on(

  {mousedown: function(){ $(this).html('down');}}, 

  {mouseup: function(){$(this).html('up');}}

 ); 
});

Upvotes: 3

David Thomas
David Thomas

Reputation: 253318

While Philippe's identified your problem (the unnecessary quotes around document) I do think you're vastly over-complicating things, though perhaps only to demonstrate your problem. But, in this case, what you're trying to do in your code could be simply replicated with:

$(document).on('mousedown mouseup', function(e){
    $('#lastClick').text(e.type);
});​

JS Fiddle demo.

And if you do need the string to be 'up' or 'down', then you can amend the above a little with a string manipulation:

$(document).on('mousedown mouseup', function(e){
    $('#lastClick').text(e.type.replace('mouse',''));
});​

JS Fiddle demo.

Upvotes: 2

Philippe Boissonneault
Philippe Boissonneault

Reputation: 3949

remove your quote

$(document).on(

{mousedown: function(){ $('#lastClick').html('down');}}, 

{mouseup: function(){$('#lastClick').html('up');}}

);

Upvotes: 3

jacktheripper
jacktheripper

Reputation: 14219

Try this instead:

$('#lastClick').on('mousedown', function() {
    $(this).html('down');
});
$('#lastClick').on('mouseup', function() {
    $(this).html('up');
});​

See this live example

Upvotes: 3

Related Questions