After reading jQuery .live() post and looking through the jQuery API I could not find a full list of events that jQuery 1.3 supports cross-browser.
They are click, dblclick, keydown, keypress, keyup, mousedown, mousemove, mouseout, mouseover, and mouseup.
You can find them in http://api.jquery.com/live/
(section caveats)
From the jQuery docs:
In jQuery 1.3.x only the following JavaScript events (in addition to custom events) could be bound with .live(): click, dblclick, keydown, keypress, keyup, mousedown, mousemove, mouseout, mouseover, and mouseup.
Related
I am building a fairly simple dialog in Touch UI (AEM 6.2) that has a check box and a text field. I want to enable/disable the textfield based on whether the checkbox is checked/unchecked. How do I go about this?
Thanks in Advance!
You can use jQuery events handlers to achieve this in Touch UI. Add Javascript/jQuery logic to the listeners.js file. This file defines JavaScript logic that defines event handlers for the TOuch UI component. Add the following the code to the JS file at: /apps/touchevents/components/clientlib/listeners.js.(Just for example)
(function ($, $document) {
"use strict";
$document.on("dialog-ready", function() {
$(window).adaptTo("foundation-ui").alert("Open", "Dialog now open, event [dialog-ready]");
});
})($, $(document));
Below are some useful links:
http://aempodcast.com/2016/javascript/simple-touch-ui-dialog-extensions-aem/#.WXD9LYTyuCg
https://helpx.adobe.com/experience-manager/using/creating-touchui-events.html
Is it possible to see (debug) custom events being fired from DOM elements in the browser?
Let's say I want to see which specific element of the Bootstrap Collapse fires the show.bs.collapse event, can I somehow see it for instance in Chrome dev tools?
First off, Monitor Events will handle this for normal JS events. However, Bootstrap events are jQuery events, so vanilla JS event listeners don't listen for them.
To listen to jQuery events run the following code snippet in your console:
jQuery('body').bind("show.bs.collapse", function(e){console.log(e);});
Replace "shown.bs.collapse" with whatever event you want. When they are logged, just check the target element for the event to know what fired it.
Now, for the other way around, to see what is listening to events. Within the elements panel, if you go to the event listener tab and uncheck "ancestors", then you will see only the directly bound event listeners on an element. This way you know what is listening for the event so you can inspect what should be done when it is fired. This matters, since you may find 'body' isn't getting the event, since it could have bubbling cancelled. So if the above snippet isn't working, you need to check for bubble cancelling in the element listening for the event.
Firefox offers out of the box, listeners for jQuery events, https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_event_listeners
But you can extend it: http://flailingmonkey.com/view-jquery-and-jquery-live-events-in-firefox-devtools/
You can use Visual Event 2 bookmarklet. Great tool used to inspect which events are attached to a specific DOM elements.
I have two drop panels one over the other and need the ability to grab the gwt NativeEvent from a GwtQuery DND DropEvent so that I can call stopPropagation and preventDefault. Unfortunately this appears to not be available in the GwtQuery DND DropEvent class. Any ideas on how to accomplish this?
The DropEvent is the gwtquery.plugins.droppable.client.events.DropEvent which is a GwtEvent and not any kind of DomEvent.
OK, typical I find the answer a couple of minutes after posting the question. The solutions is in your DraggableWidget to getOption().setGreedy(true). This enables stopPropagation and preventDefault.
It seems that click event have delay on website on iphone, but the touchstart or touchend could response correctly, but how to use the only touchstart, touchend and touchmove to simulate click event? or even simulate the long press event on a website on iphone?
I think I can't bind the click handler directly to the touchstart or touchend event, one situation is that when the user press on the screen , fire the touchstart event , but if he don't want a click event, how can he cancel it, either I can't bind the handler to the touchend event.
So how can I simulate the click event with touchstart and touchend event?Is there conflict or something should I mentioned?Is there some post or article talk about how can I achieve this?
I just made a chrome extension for this purpose. It translate mousedown, mousemove, mouseup events to touchstart, touchmove, touchend. It actually simulate iphone5.
https://chrome.google.com/webstore/detail/touchphone-simulator/jijkpkhmnpbecppjhicgegndbbgfnngf
I use phantom-limbs.js. If you want more functions like gesture(which i excluded in my extension), visit brian's github.
https://github.com/brian-c/phantom-limb
In Safari on iOS, is there a CSS pseudo class for when a user is touching an element? Or do I have to use javascript?
Similar to how :hover works on desktop computers, it would be active while the finger is touching the element, and then be inactive as soon as the user stops touching the element.
CSS currently does not define any user-action pseudo-classes for touch paradigms.
You'll have to listen for events and handle them accordingly with JavaScript. In fact, Apple recommends this; see Handling Events in the Safari Web Content Guide for details. You'll want to look at the touchstart, touchend, touchmove and touchcancel events, for example.
Answered here: https://stackoverflow.com/a/8877902/520129
<body ontouchstart="">
...
</body>
Applied just once, as opposed to every button element seemed to fix
all buttons on the page. Alternatively you could use this small JS
library called '[Fastclick][1]'. It speed up click events on touch
devices and takes care of this issue too.
[1]:
http://assanka.net/content/tech/2011/08/26/fastclick-native-like-tapping-for-touch-apps/