I want to handle event tap with fabricjs on mobile device. What is correct way to implement that ?
Currently, I see implement "tap" event in the fabricjs source code. And if I want handle that event, I need change fabricjs source code:
if (typeof eventjs !== 'undefined' && eventjsFunctor in eventjs) {
eventjs[eventjsFunctor](canvasElement, 'gesture', this._onGesture);
eventjs[eventjsFunctor](canvasElement, 'drag', this._onDrag);
eventjs[eventjsFunctor](canvasElement, 'orientation', this._onOrientationChange);
eventjs[eventjsFunctor](canvasElement, 'shake', this._onShake);
eventjs[eventjsFunctor](canvasElement, 'longpress', this._onLongPress);
eventjs[eventjsFunctor](canvasElement, 'tap', this._onLongPress);
}
Add last line:
eventjs[eventjsFunctor](canvasElement, 'tap', this._onLongPress);
And now I can catch tap event through "longpress" event.
this.canvas.on({'touch:longpress': function(e) {
console.log("touch:longpress + tap");
});
My question is there another nice way to handle 'tap' event on fabricjs without modified fabricjs source code & can handle 'tap' event by listen "touch:tap" event name ?
Thank you,
You can add events to uppercanvas using
eventjs.add( canvas.upperCanvasEl, 'tap', onTap);
eventjs.remove( canvas.upperCanvasEl, 'tap', onTap);
function onTap(e) {
console.log("tap");
})
Related
The question basically is how to convert this:
var evt = 'click' || 'touchstart'; // Based on some logic
$('.selector').on(evt, function(){});
into Meteor event handler
Template.MyTemp.events({
....??? : function(e, t){}
});
UPDATE
Based on the comments below, seems like chrome is the problem, as it sets the touch events passive = true.
So the new question would be:
How to set the passive property for event listeners in Blaze Template
Events?
You can specify multiple events in a single handler by using a / as a delimiter between the event types. docs
Template.MyTemp.events({
'click/touchstart .selector'(e,t){
e.preventDefault(); // prevents default click after touchstart
// your handler
}
});
In english:
for the template MyTemp handle click or touchstart events on the
selector class.
This is also useful reading: touch and mouse
I'm writing my plugin and I am trying to set an event to an element, that I'll add to the editor. The event should act on the key enter.
Unfortunately, when I try to catch a 'key' or 'keydown' event nothing happens, but if I set 'click' event it's working great.
var element = editor.document.createElement('div');
element.setAttribute('data-type', 'example');
element.on('click', function() {
alert("Hi");
});
editor.insertElement(element);
Can someone help a noob like me ? :D
Thanks
You can only listen to keyboard events in editing hosts (focusable elements). So just add your listener to editable element, e.g.
editor.editable().on( 'keyup', function( evt ) { console.log( 'keyup' ); } );
I haven't seen much documentation and cant seem to get my code to work. the code snippet is below. I'm trying to remove the on mouse over listener but have had no success. Google charts docs has the method as such - google.visualization.events.remove Listener(listener_handler).
I'm uncertain what the listener_handler actually pertains to. Im trying to remove the on mouse over listener once the chart has been clicked.
google.visualization.events.addListener(chart, 'onmouseover', chartMouseOver);
google.visualization.events.addListener(chart, 'onmouseout', chartMouseOut);
google.visualization.events.addListener(chart, 'select', function () {
google.visualization.events.removeListener(chartMouseOver);
}
You need to store the returned event object in a variable, and pass that to removeListener :
var event = google.visualization.events.addListener(chart, 'onmouseover', function() {
alert('onmouseover');
google.visualization.events.removeListener(event); //the event object as param
});
demo -> http://jsfiddle.net/cmDT2/
I am using CKEditor 4.4.3 and trying to listen to an editor's click event:
editor.on('click', function (e) {
console.log('click event from attaching to the editor');
});
For some reason, the click event never fires. However, if I listen to the doubleclick event, it fires when the editor is double clicked.
I was previously listening to the click event on editor.editable, but it doesn't appear to work for editors that are not inlined. Why is the click event not working?
Some further investigations:
Attaching the event handler on editor.document fires for every click, including clicks outside the editor.
Attaching the event handler to editor.container fires for clicks on the container including the toolbars.
Fiddle: http://jsfiddle.net/295PE/
Correct way of attaching listeners to the editable element in CKEditor:
editor.on( 'contentDom', function() {
var editable = editor.editable();
editable.attachListener( editable, 'click', function() {
// ...
} );
} );
Read more about the reasons why contentDom event has to be used instead of e.g. instanceReady in editable.attachListener documentation.
Use attach the event handler to the editor's editable. This needs to be done after the editor is ready:
editor.on('instanceReady', function (e) {
editor.editable().on('click', function (event) {
console.log('clicked');
});
});
Fiddle: http://jsfiddle.net/8fZpz/
When click on datepicker (http://www.eyecon.ro/bootstrap-datepicker/), his SHOW event fires, but the modal's SHOW.BS.MODAL fires too. Whhere is a problem?
$(document).ready(function() {
$('#ArrDate')
.datepicker()
.on("show", function(event){
alert("Q");
});
$("#dlg3000to3100")
.on('show.bs.modal', function (event) {
alert("W");
});
$("#dlg3000to3100")
.modal("show");
});
exampleExample
Thanks
It seems to be a bug (or feature?) of the datepicker. What you can do is to prevent the show.bs.modal event reaching the dialog.
$('#ArrDate').on('show.bs.modal', function (event) {
event.stopPropagation();
});
This will detect the event at the datepicker level and stop the event propagation, so show.bs.modal will not 'bubble up' to the dialog.
Another work around is to swap the show.bs.modal with shown.bs.modal on modal event.
modal.on('shown.bs.modal', function (event) {
// Do something
});
however if it is not possible to swap show with shown or hide with hidden use the namespace check
modal.on('show.bs.modal', function(e) {
if (e.namespace === 'bs.modal') {
// Do something
}
});
Had a similar issue, caused by the datepicker watching for a show event.
One option is to use the shown event on the modal but this is not ideal in all cases
$('#dlg3000to3100').on('shown.bs.modal', function (event) {
// modal code in here
});
A more elegant solution is to check the namespace of the event
$('#dlg3000to3100').on('show.bs.modal', function (event) {
if(event.namespace !== 'bs.modal') return;
// modal code in here
});
https://jsfiddle.net/bzh75tww/