Mousedown和mousemove在Meteor中的执行不一致

Question

I have an one page app in Meteor.

I want to track when whether a bookmarklet (in the form of a <a> tag containing an image) has been dragged towards the bookmarks bar.

I'm using a combination of mousedown, mousemove, and mouseup to try to track the drag.

Template.myTemplate.events = {  
  'mousedown': function(){    
    Session.set('dragging', true)   
    console.log('drag starts')
  },  
  'mouseup': function(){  
    if (Session.get('dragging') == true && event.y < 10){   
      // The result i want  
    }  
    Session.set('dragging', false)  
    console.log('drag stops')  
  }  
}

The drag starts well enough, but soon after the mouse leaves the <a> tag it just seems to baulk, and mouseup doesn't register as it should.

The logic works as it should if I return false after mouseup and mousedown - ie. I can move the mouse far and wide after mousedown, and watch for event.y being < 10 and there's no baulk - but then the code does not have the desired effect of the user being able to drag the <a> tag.

Do you have any ideas?

Answer 1

'mousedown': function(){

You're doing mousedown on the template, it should be on the a element.

So, do this instead:

'mousedown a': function(){

Or choose the right a element here.