I am using kinetic-v4.3.0-beta2.js
I want to handle mobile touch event on group for ios & android.
I am binding event such as following
group.on('touchstart', function (evt) {
$('#onpopMenu').popup("open", { x: leftPosition, y: topPosition });
});
I tried 'touchend', 'touchstart' and 'tap'
Got partial success in "Tap" but in that case, shape is draggable so tap event is not properly fire because object will move from it's place.
but if shape is not draggable then it will work fine.
I tried 'touchend' and 'touchstart' event also but popup menu is close after event fire in iOs and android as I am opening Jquery Mobile Popup by Touching group!
The popup menu will only open for 2-3 seconds when the touchstart event fired.
Anyone faced the same problem with kinetic JS Mobile events? How to handle only "Click" or "Touch" event with it.
I checked this http://www.html5canvastutorials.com/kineticjs/html5-canvas-mobile-events/ for reference but had no luck!
I am developing application with Phonegap + JQM + Kinetics JS
Thanks in advance!
Keep in mind that your application is running inside a webview. This is why you've got these 2/3 seconds of delay on touch/click event.
This is why in all my PhoneGap dev, I use Fastclick.js. FastClick is a simple, easy-to-use library for eliminating the 300ms delay between a physical tap and the firing of a click event on mobile browsers. The aim is to make your application feel less laggy and more responsive while avoiding any interference with your current logic.
You can find it here https://github.com/ftlabs/fastclick.
It's easy to use (if you're using jQuery) :
<script type='application/javascript' src='/path/to/fastclick.js'></script>
<script>
$(function() {
FastClick.attach(document.body);
});
</script>
I made a jsfiddle for you to test out the click/touch events.
From what I understand, you have a Kinetic.Group node that is draggable but you want to open up a popup using jquery mobile.
You are right that when you drag an object, the tap event does not fire. But you said otherwise the tap event works fine if the shape is not draggable. This leads me to believe:
You want a popup on "tap"
You want a popup on "dragend"
If so, all you need is to use both events like this:
group.on('tap dragend', function (evt) {
$('#onpopMenu').popup("open", { x: leftPosition, y: topPosition });
});
Please let me know if my assumptions are wrong, and I can work with you to get the right solution. I am guessing when you want to popup, so if you let me know exactly when you want a popup to occur that will help a lot.
You might want to also look into using evt.cancelBubble = true; http://www.html5canvastutorials.com/kineticjs/html5-canvas-cancel-event-bubble-propagation-with-kineticjs/
Related
I encounter a problem where click event on Link Element (A tag), or any other DOM Element, is not calling handler/callback function.
it doesn't matter which parent in the hierarchy I am getting it not getting this event.
no Event.stopImmediatePropagation or Event.stopPropagation exist.
the reason why is Chrome 56, they change some of the events and stop transforming Mouse Events to Touch Events.
see here: https://developers.google.com/web/updates/2016/12/chrome-56-deprecations#mouse_on_android_stops_firing_touchevents
to solve the issue just use touchstart event for mobile where you used click before. or if you need only one click you can do:
Element.addEventListener("click", callback);
Element.addEventListener("touchstart", callback);
function callback(event) {
Element.removeEventListener("click", callback);
Element.removeEventListener("touchstart", callback);
// do something
}
now, to have a simulate click you need to check 300ms pass between "touchstart" and "touchend". if it less you have a click.
Note: the "click" event occur after "touchstart"
I am adding a canvas on top of a Haxe HTML5 Game. But once I do, the buttons in the Haxe game no longer register the click events. Does anyone know in the Haxe/openFL compiled code where the click events are being handled?
My best guess is that they are looking at the top most canvas, which is now mine and therefore not seeing the hits.
EDIT:
Found this code where the mouse events were being added to the canvas:
while(_g2 < mouseEvents.length) {
var type2 = mouseEvents[_g2];
++_g2;
element1.addEventListener(type2,$bind(this,this.element_onMouse), true);
}
Where element1 = the canvas.
I can't seem to send $(canvas).click() events to that canvas. Anyone have further suggestions?
My conclusion is, I was using JQuery to send calls to event listeners that were added through plain JavaScript.
document.getElemntById("canvas").addEventListener("mousedown", func...);
Apparently the JQuery calls can not call non JQuery events.
$(canvas).mousedown(); // does not work
Using
document.getElemntById("canvas").dispatchEvent(event) r
and sending MouseEvents to the Haxe canvas worked fine.
This one is getting tricky for me.I have the google map in my page which is working properly ,above it lies a canvas. I need to make the google map clickable .i.e when i click on the canvas ,the map should behave normally .I have added pointer-events:none;attribute.It works properly in Firefox ,chrome and IE11.
However my requirement is I need to make it clickable in IE9 on wards,which am unable to replicate. How to do that?
If any one can replicate the behavior in a fiddle ,that will be really helpful to me.
There's an old jQuery hack that simulates pointer-events:
Listen for a click event on the canvas and in the click handler:
Hide the canvas: $(this).hide();
Ask the document to get the element at the clicked xy: var $map=$(document.elementFromPoint(event.clientX,event.clientY); (Adjust clientX/Y by any offset to the map/canvas elements) If the map is the only element under your canvas, you could define $map at the start of your app and avoid this step.
trigger the same event on the google map: $map.trigger(event);
redisplay the canvas: $(this).show();
I have events working fine in Chrome and IE10 for Google Maps (APIv3) and RichMarkers. Problem is, the same code borks on Firefox19 with event undefined. So, this code works on Chrome and IE10...
google.maps.event.addListener( marker, 'mouseover', function(event) {
console.log(event);
});
But not on Firefox. Interestingly, attaching a CLICK event to the map object does work as you'd expect. The event object is visible within the called function in all browsers. So, does anyone have any idea as to how to fix this? I really need to pass the event object onwards as I have funcs that use it for positioning and so on.
Normally, I'd get around this using jQuery to attach the events, but this is not an option here.
Cheers
CT
There is no mouseover-event : http://google-maps-utility-library-v3.googlecode.com/svn/trunk/richmarker/docs/reference.html
Apply the mouseover-event to the content of the marker(the content must be a node)
i saw some online flash games can do this:
when you switch your current web to other windows or other web tabs, the application program will draw a black block and tell you've leave the application, click on the flash area to resume .
i've tried some event like focus in and out or mouse leave on the stage,but the reaction isn't what i expected.maybe i use them in the wrong way .please tell me if you got the solution.
var count:int = 0;
this.stage.addEventListener(Event.MOUSE_LEAVE,function(e:Event):void
{
//only be called if your mouse cursor leave the area,but can't detect whether you're actually switch to other program.
trace('mouseleave',count++);
});
this.stage.addEventListener(FocusEvent.FOCUS_OUT,function(e:Event):void
{
//no reaction
trace('focus out',count++);
});
this.stage.addEventListener(MouseEvent.ROLL_OVER,function(e:Event):void
{
//no reaction
trace('mouseenter',count++);
});
There are two methods:
Use Event.ACTIVATE event. But a swf should be on focus before.
Use JavaScript call from ActionScript to check is a window or a tab on focus.