I need to support both, mouse and touch events, so I have code like this
<button
(touchstart)="doSomething($event)"
(mousedown)="doSomething($event)">
Is there some way to merge both into one ? I also noticed that touch devices trigger mouse events, so I need a better solution. Is it possible, for example, to write an event listener, something like this
<button (pointerDown)="doSomething">...</button>
And in my PointerDown event class I listen to both events ? This would be nice :)
I also found ng2-events library, not sure if it will do what I need.
Any help would be appreciated!
You can do all that using attribute directive and #HostListener. Dont have everything in my head but you'll understand once you look into it
Related
If I use CEFGlue CefDomVisitor class I can navigate around the DOM. Great, really useful and good job by the developers
Is there any way to pick up what event listeners are associated with a Tag?
Essentially id like to pick up the javascript that 'would' run when the element is clicked (for example). I think I can achieve this by finding out what is listening to the elements event. Then I want to run it independently of the event.
Hope this makes sense, and any help feedback or comment very much appreciated
Thanks
If you are trying to get information about the DOM and the elements that have events jQuery can help you with that. But I am not sure what you are asking.
This isn't exactly what you would be looking for but: $._data( $("#foo")[0], "events" ); from event info from jQuery
I would like to know if the flipview control of the winjs library (win8) has got an event, which it called when the page turns, no matter if by keyboard or by mouseclick or swiping?
I was Googling for it, but i could just find other methods which does not fire at the right moment.
is there maybe a way you can make such events?
You should use the onpagechanged event. This will fire when the user switches pages no matter the mechanism.
Try using the pagecompleted event. Used it in one of my apps and it worked. Hope it works for you too :)
Using jquery, I have an event that fires on touchend. I do not want that event to fire when the user scrolls (touchmove). The only thing I've found on SO is this this, but I don't like it. It feels hacky. It hurts my head to think that there isn't away to figure this out without setting a global flag, simply to check if a touchmove has occurred.
Is there anyway to figure the order of events out? Some wrapper that encapsulates all the touch events that occurred. Because this is for work and the powers that be don't want to bloat our code base with libraries, I can't use an external library, but if anyone knows a library that has this functionality that i could peruse for inspiration that would also be helpful.
Buttons are slow on mobiles (at least 300ms delay in most browsers due to drag detection among other things). Google wrote some javascript to fix this:
http://code.google.com/mobile/articles/fast_buttons.html
The Mobile HTML5 Boilerplate people integrated this into their package:
https://github.com/h5bp/mobile-boilerplate/blob/master/js/mylibs/helper.js#L86
I want to figure out how I can easily use this with backbone. Something like:
events: {
"fastbutton button.save": "save"
}
Where fastbutton replaces click or mousedown with the fast button code. I expect that I will need to rewrite the MPB.fastbutton code a bit. Has anybody done this?
Instead of creating 'fastbuttons' everywhere, it's probably saner to use a library like FastClick that will transparently convert touches to click events on the touched element and get rid of that 300ms delay.
It's as easy as new FastClick(document.body) and you're ready to go.
The advantage of that approach is that if or when the behaviour of touch events changes on mobile devices so that there's no delay on elements with a click event registered, you can just change one line of code to drop the library instead of changing all your code to convert 'fastbuttons' to regular buttons. Maintainability is always good.
I'm pretty sure, this won't work the way you'd like it to. Instead of having an additional event, like say "fastclick", you have to define an element as beeing a fastButton. You actually have to create an instance of fastbutton on which you pass the element and the code like this:
new MBP.fastButton($("button.save"), function() { this.save(); }.bind(this));
In case of backbone, you can easily do this in the initialize() function instead of the events object.
// sorry, just read that you are not really looking for this :)
I have a facebook connect button on this site here is the code
<fb:login-button onlogin="javascript:jfbc.login.login_button_click();"
perms="email,publish_stream,user_about_me,user_hometown,user_location,user_birthday,user_religion_politics,user_interests,user_activities,user_website"
size="medium" v="2"><a class="fb_button fb_button_medium">
<span class="fb_button_text"\>Login With Facebook</span></a></fb:login-button>
and i want to trigger this button with a javascript call and doing research i found this jquery that seems that it would do the trick (havent tested though) and i was wondering if there is an equivelent javascript or mootool because jquery is not installed. I can install it if i cant find a solution. Or if anyone has another idea on how to trigger this facebook button
$("fb\:login-button").trigger("click");
There are two ways to "trigger" a listener:
call it directly (e.g. element.onclick())
dispatch an event into the DOM that the listener will respond to
The trouble with the first method is that it doesn't replicate a bubbling event so the listener may not work as intended (e.g. there is no associated event object or bubbling, the listener's this keyword may not be correctly set).
The trouble with the second is that some browsers will not allow programatically dispatched events to do certain things (click on links for example). Also, in some browsers you have to use the W3C dispatchEvent and in others the Microsoft fireEvent.
So unless the listener has been designed specifically to work with one method or the other and is called appropriately, your chances of triggering the listener successfully are quite low.
PS. Some libraries provide their own event system, with custom events and bubbling of otherwise non-bubbling events, but in that case you have to set and trigger the listener using that library, otherwise it will probably not respond to either of the above methods.
You should be able to just invoke the same code that is invoked inline:
jfbc.login.login_button_click();
I suppose it would be something like
document.getElementsByTagName("fb\:login-button")[0].click();
I'm sure that would work very well with a "normal" DOM element that handles the click event; however, I'm not entirely sure it will work in all browsers with the fb:login-button element shimmed into HTML. You'll have to let me know.
Looks like you should be able to do:
document.body.getElementsByTagName("fb\:login-button")[0].click();
It looks like you want a namespaced element selector, so you should use:
document.getElementsByTagNameNS('fb', 'login-button')[0].click();
The : is the namespace separator.
I ran into this tonight, absolutely positioned a new button image over the iframe, and was planning on using pointer-events:none to pass through and click the iframe, but I was looking for a cross-browser solution, here you go.
jQuery('.button_fb_connect').live('click', function(){ FB.login() })
Your simply running the js function FB.login() after clicking your new element, obviously you can use whatever event you want.
Thats in jQuery of course, but thats the function you want, not just a simple click event trigger.