Can you add a right-click event handler to CanvasJS Charts' dataPoints?
I'm aware the documentation mentions "click, mouseover, mouseout and mousemove" as available events, so I'm looking for an undocumented feature or a trick to accomplish this.
Yes you can have a trick for working with right click also. Follow, this example-
//Work aroound for right click on data points
var chartContainer = document.getElementById("chartContainenter");
function onMouseover(e){
chartContainer.addEventListener('contextmenu', e.chart.rightClick = function(ev){
ev.preventDefault();
onRightClick(e); //right click event handler
return false;
}, false);
}
function onMouseout(e){
chartContainer.removeEventListener('contextmenu', e.chart.rightClick);
document.getElementById("textBox").innerHTML = "";
}
Related
I'm using Hammer.js to look for horizontal pan gestures, I've devised a simple function to clicks a button when panned left or right. It works okay, except the vertical scroll doesn't do anything on a touch device, or it's really glitchy and weird.
Here's the function:
var panelSliderPan = function() {
// Pan options
myOptions = {
// possible option
};
var myElement = document.querySelector('.scroll__inner'),
mc = new Hammer.Manager(myElement);
mc.add(new Hammer.Pan(myOptions));
// Pan control
var panIt = function(e) {
// I'm checking the direction here, my common sense says it shouldn't
// affect the vertical gestures, but it blocks them somehow
// 2 means it's left pan
if (e.direction === 2) {
$('.controls__btn--next').click();
// 4 == right
} else if (e.direction === 4) {
$('.controls__btn--prev').click();
}
};
// Call it
mc.on("panstart", function(e) {
panIt(e);
});
};
I've tried to add a horizontal direction to the recognizer but it didn't really help (not sure if I did it even right):
mc = new Hammer.Manager(myElement, {
recognizers: [
[Hammer.Pan,{ direction: Hammer.DIRECTION_HORIZONTAL }],
]
});
Thanks!
Try setting the touch-action property to auto.
mc = new Hammer.Manager(myElement, {
touchAction: 'auto',
recognizers: [
[Hammer.Pan,{ direction: Hammer.DIRECTION_HORIZONTAL }],
]
});
From the hammer.js docs:
When you set the touchAction to auto it doesnt prevent any defaults, and Hammer would probably break. You have to call preventDefault manually to fix this. You should only use this if you know what you're doing.
User patforna is correct. You need to adjust the touch-action property. This will fix scrolling not working when you have hammer bound on a big element in mobile.
You create a Hammer instance like so
var h = new Hammer(options.contentEl, {
touchAction : 'auto'
});
I was working on a pull to refresh feature, so I need the pan event.
Add the recognizers.
h.get( 'pan' ).set({
direction : Hammer.DIRECTION_VERTICAL,
});
h.on('panstart pandown panup panend', eventHandler);
Inside the eventhandler, you'd look at the event that was triggered and manually call on event.preventDefault() when you require it. This is applicable for hammer 2.0.6.
For anyone who's looking the pull to refresh code was taken from - https://github.com/apeatling/web-pull-to-refresh
My problem was that vertical scroll was toggling a sidebar that was supposed to show/hide on horizontal pan/swipe. After looking at the event details, I realized that Hammer probably triggers panleft and panright event based on X delta and doesn't consider Y delta, so my quick solution was to check the pan direction in my handler:
this.$data.$hammer.on('panleft', (e) => {
if (Math.abs(e.deltaY) > Math.abs(e.deltaX)) {
return;
}
this.isVisible = true;
});
I was stuck on this for several days. Hope this will fix your problem.
mc = new Hammer(myElement, {
inputClass: Hammer.SUPPORT_POINTER_EVENTS ? Hammer.PointerEventInput : Hammer.TouchInput,
touchAction: 'auto',
});
When the relevant gesture is triggered, we applied a css class to the element, that would set the touch-action to none.
mc.on('panmove panstart', event => {
mc.addClass('is-dragging');
}
);
.is-dragging {
touch-action: none !important;
}
Hammer 2.x does not support vertical swipe/pan. Documentation says:
Notes:
When calling Hammer() to create a simple instance, the pan and swipe recognizers are configured to only detect horizontal gestures
You can however use older 1.1.x version, which supports vertical gestures
——
Clarification: this refers to a ‘simple instance’ which is when you don’t pass in any recognizer configuration as the second parameter. In other words these are the defaults but can (and usually should) be overridden.
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/
I'm implementing functionality to create a link between two nodes on Shift+Alt+Click. Like this
function graphSelectionChange(event){
var selection = event.selection;
if (selection.length === 2 && event.altKey){
var fromitem=selection[0];
var toitem=selection[1];
chart.addData({
links:[{
"id":"ll"+nextId,
from:fromitem.id,
to:toitem.id,
"style":{"label":"newLink"}
}]
});
nextId += 1;
}
}
The altKey seems not to be detected. According to this http://jsfiddle.net/Rw4km/ it is the alt/option button on a keyboard. Any clue?
Use click event (it also has selection attribute).
Selection event does not have altKey property.
There are other selection changes, like selected nodes disappearing, that do not have associated mouse clicks an you probably do not want a link added in such case.
Highcharts offers the opportunity to detect clicks on chart points, but is it possible
to detect other events, such as the double click or mousedown event?
Thanks in advance
Each component only supports certain events, for example the Chart component will detect addSeries, click, load, redraw, and selection. I don't believe this set is extensible, so you can't capture a different event like mousedown.
You could try to inspect the source of your page and attach listeners to the elements that HighCharts generates, but this would be an undocumented work-around and would be liable to break in future releases. In addition, if you have to support < IE9 you would need handlers for both SVG and VML generated markup.
You can get creative with some events. Here's an example of detecting a double click using a click handler:
Working Demo
var clickDetected = false;
// create the chart
$('#container').highcharts({
chart: {
events: {
click: function(event) {
if(clickDetected) {
alert ('x: '+ event.xAxis[0].value +', y: '+ event.yAxis[0].value);
clickDetected = false;
} else {
clickDetected = true;
setTimeout(function() {
clickDetected = false;
}, 500);
}
}
}
},
...
It's possible, but in a different way. In Highcharts you can add event to each element using element.on. For example:
chart.series[0].data[0].graphic.on('dblclick', function() {
//callback here
});
And simple jsFiddle for you. Good thing is that you can add to all elements, and make sure work in all browsers.
i´ve got a question about mootools eventhandling.
I wanna delay a mouseenter event for a dropdown navigation. After 1 second the drowdown list will be shown by "setStyle('display', 'block')...this is what i´ve got so far, and it´s working:
$('main-nav').getElements('li.level-1 ul.quick-nav').setStyle('display', 'none');
$('main-nav').getElements('li.level-1').each(function(elem){
var list = elem.getElement('.quick-nav');
elem.addEvents({
'mouseenter' : function(event){
(function() {
elem.getElement('.quick-nav').setStyle('display', 'block');
}).delay(1000)},
'mouseleave' : function(event){
elem.getElement('.quick-nav').setStyle('display', 'none');
}
});
});
I´ve delayed the mouseenter event with the delay function...the problem i got and still can´t solve is that the mouseenter event will although happen when i already left my navigation item. I enter the item, leave the item immediately, and after one second the subitem still appears. I therefore need some kind of check within the mouseleave event, wheather my menuitem is already displayed or not. Then i could stop the mouseenter event, if the menuitem is still not visible... I don´t know how i can respond the mousenter event from the function of the mouseleave event...hope anybody understood this...
Thanks in advance.
use a timer and clearTimeout on mouseleave (also $clear(timer) in older versions of mootools).
$('main-nav').getElements('li.level-1 ul.quick-nav').setStyle('display', 'none');
$('main-nav').getElements('li.level-1').each(function(elem) {
var list = elem.getElement('.quick-nav');
var timer;
elem.addEvents({
'mouseenter': function(event) {
timer = (function() {
elem.getElement('.quick-nav').setStyle('display', 'block');
}).delay(1000)
},
'mouseleave': function(event) {
clearTimeout(timer);
elem.getElement('.quick-nav').setStyle('display', 'none');
}
});
});