If I have a webpage and I want to monitor clicks and touches on a div, do I have to add event listeners for each event or will a touch event act as a click event by default on mobile?
Yes, by default touching an element on a mobile device will fire its click event handler. However, this behavior is usually undesirable since it allows for a 300ms delay before the event handler function runs. See this blog post for more information.
use this mousedown()
But this will record even drag and all kinda mouse button clicks.
$('yourelementid').mousedown(function(e){
if( (e.which == 1) ) {
alert("left button");
}if( (e.which == 3) ) {
alert("right button");
}else if( (e.which == 2) ) {
alert("middle button");
}
e.preventDefault();
});
try this...
Try giving both events side by side
$('myDiv').on("mousedown touchstart", function (e) {
if (userAgent.match(/iPad/i) || userAgent.match(/iPhone/i) || userAgent.match(/Android/i)){
//try mousemove touchmove together
// define your logic
})
Related
using vanilla js. Any way to grab the "right-click" (option-click) from OSX?
function clickey(e)
{
if(event.button==2 || /*how you'd do it in Java=)*/ e.getButton() == MouseButton.BUTTON3 )
...
}
but in js, how do eeet?
You need to listen to the contextmenu event. This is triggered when the context menu should be shown. So either if the right mouse butten or or ctrl + mouse.
If it is not supported then you can try to check the mousedown event where button is 2 and ctrlKey is true if it is triggered by using ctrl + mouse
document.addEventListener("contextmenu",function(event){
});
OR (depending on what the browser supports)
document.addEventListener("mousedown",function(event){
if( event.ctrlKey || event.button == 2 ) {
}
});
edit: removed the which info
I'm not experienced with OSX, but the Mouse Events have the option to check the modifier keys. So something along these lines should work:
DOMElement.addEventListener("click",function(event){
// either check directly the button
if (event.button == 2){}
// or
if (event.ctrlKey || event.altKey || event.metaKey){
// do stuff
}
});
I need to trigger the click, on click on my webpage. I tried the below and it triggers the click onload and not on click.
$(function() {
$("body").click(function(e) {
alert("code");
})
$('#container').trigger('click');
});
Basically I need to show a popup on click of P keyword from keyboard. While I started I got stuck during the initial stages. Not sure how to achieve this.
I guess you need a keydown event where P key passes ASCII code 80:
$("body").on("keydown", function(e) {
if (e.which === 80) {
alert("'p' was pressed");
}
});
Currently I am developing a website for ipad Safari
I used
addEventListener('touchmove', function(e) { e.preventDefault(); }, true);
to prevent the background moving when dragging the content. The problem is when I allow some element to drag
addEventListener('touchmove', function(e) {
//alert (e.target.id);
if ( e.target.className != 'issues' && e.target.id != 'dialog' && e.target.id != 'issuesBox')
e.preventDefault();
return false;
}, true);
when I drag the element, it will drag the background too , how to fix this problem? I observe that this problem may caused by taphold ,Thanks.
Are you trying to prevent scroll on some element? Prevent default of both touchstart and touchmove events then. Here's doc from apple.
In my experience, prevent default on touchstart event is enough, e.g.,
$(document).on('touchstart', function (evt) {
evt.preventDefault();
});
I have a boxee html application. I can handle all navigation keys on the remote control, except the big back/menu button. This one closes the app - I would like to use it to bring up my app menu instead.
Is there a way to prevent default behavior on this key?
you can trigger your back/menu button since the last api update from boxee. in your js-file where you set your keyboard mode you can catch your back button with:
boxee.onKeyboardKeyBack = function(){
browser.execute( "callYourShowMenuFunction()" );
}
browser.execute() delegates that to your htmlbrowser. now your backbutton should trigger your function in javascript!
remember back button usually should close the app, so don t forget to give your user an logout option ;) otherwise your app won t be published!
Backspace handling
document.body.onkeypress = function (e) {
if (!e)
var e = window.event;
/*backspace*/
if(e.keyCode == 4){
e.preventDefault();
/*Do your thing*/
}
}
On right click
document.onmousedown = function(e) {
if (!e)
var e = window.event;
/*right mouse*/
if (e.which == 3){
e.preventDefault();
/*Do your thing*/
}
}
Good article on similar event management http://www.quirksmode.org/js/events_properties.html
Edit: I'd recommend localising the onmousedown to the objects which you want to trigger the event on.
I want to detect the keycombo CTRL+ENTER in my toolbar text field and run a function.
I notice currently the default when ENTER is hit that it does on command, so I need the keycombo to fire before the oncommand.
Add an event listener to the field (true makes the handler trigger in the capturing phase) :
element.addEventListener('keydown', eventHandler, true);
where eventHandler looks like
function eventHandler(event) {
if(event.ctrlKey && event.keyCode === KeyEvent.DOM_VK_RETURN) {
event.stopPropagation(); // stop event bubbling here
event.preventDefault(); // don't execute default action
// do something
}
}
List of possible keyCodes.