Stop Hyperlink Event in Spine.js

Question

I've defined an event in a Spine.js controller like so in CoffeeScript:

class Charter extends Spine.Controller
    events:
        'tap    #update':   'update'

    constructor: (params) ->
        super

    update: (e) ->
        dosomething()
        false

When clicking on the #update link, the update function is called, but the link is also activated and directs the browser to the URL.

I've tried e.preventDefault(), e.stopPropagation(), and returning false to no avail. The event seems to be properly formed, with the currentTarget being the #update link so I am wondering if it is something unique to the way Spine is handling the event (I had no trouble with this in Backbone.js)

have you tried `e.preventDefault()` *before* `dosomething()`? If it's throwing an error you might never get to the return. — Ricardo Tomasi, Dec 12 '11 at 05:35
Yes, I've tried both `e.preventDefault()` and `e.stopPropagation` as the first thing the update method does without any luck. — djlumley, Dec 12 '11 at 23:06
Even if I don't do anything else in the update method apart from trying to stop the event, I am still directed to the new page. Console logs show that the update method is being called each and every time. — djlumley, Dec 13 '11 at 03:33
In this test: http://tinkerbin.com/1j5RMnu1 it works fine (using `click`, `tap` doesn't fire on click). Could you provide a (non)working example of your code? — Ricardo Tomasi, Dec 13 '11 at 04:08
I tested the app on a mobile device, normal hyperlinks that should be directing the browser normally aren't working. I had a look through the included libraries, and it looks like the touch module of Spine.js blocks click events on the body of touch capable devices, but catches click events on the body of non-touch capable devices to fire it's own tap event. — djlumley, Dec 13 '11 at 04:50
I've found a range of issues related to using the touch events as they currently are, I'll update the question once I've got time to write a well formed explanation. — djlumley, Dec 15 '11 at 01:59

score 1 · Answer 1 · answered Dec 13 '11 at 23:53

1

The events must working with el together, but I didn't find you el definition.

try this one:

class Charter extends Spine.Controller
    el: 'body'

    events:
        'tap    #update':   'update'

    constructor: (params) ->
        super

    update: (e) ->
        dosomething()
        false

answered Dec 13 '11 at 23:53

Daniel Lv

867
6
10

2

You pass `el` to the constructor on instantiation: `new Charter { el: '#ccc' }`, http://spinejs.com/docs/controllers – Ricardo Tomasi Dec 14 '11 at 21:56
I'm passing it via the constructor. Additionally, if you don't assign an existing el, it creates a new one using the tag and classes supplied (div by default). – djlumley Dec 15 '11 at 01:58
You need the element tag (as you pointed out), but you have to pass it via the constructor – Jaco Pretorius Nov 21 '12 at 17:44

score 0 · Accepted Answer · answered Dec 20 '11 at 05:02

In spine's touch.coffee the following code is what has been causing this error:

if $.support.touch
  $('body').bind 'click', (e) -> 
    e.preventDefault()
else
  $ -> 
    $('body').bind 'click', (e) -> 
      $(e.target).trigger('tap')

The mobile device doesn't receive any of the click events that would fire hyperlinks, or submit events when hitting the native form submit (go on iOS's keyboard).

The only solution I could find was to not use tap events at all, and use click - even for mobile browsers.

Obviously this isn't optimal, and am eager for a better solution.

Stop Hyperlink Event in Spine.js

2 Answers2