I am trying to make a calculator using phonegap - but I am running into problems in adding the touch event. It does not show anything on the display. kindly see if there are problems in the code. and suggest me a solution.
**I have added the onTouch event to all the numbers and math operators buttons.
function onload(){
document.getElementById("display").addEventListener('onTouch',insert,false);
document.getElementById("clear").addEventListener('onClear', clear, false);
document.getElementById("equal")addEventListener('onEqual', evaluate,false);
}
function clear(){
document.getElementById("display").value="";
return false;
}
function insert(val){
document.getElementById("display").value+=val;
}
function evaluate(){
try
{
ans= eval(document.getElementById("display").value);
document.getElementById("display")=ans;
return false;
}
catch
{
document.getElementById("display").value="Error";
return false;
}
}
I am not sure about the onTouch event. Does that exist at all?
I would suggest to try either touchstart or touchend maybe touchmove event handlers. These should work. For example:
document.getElementById("display").addEventListener('touchstart',insert,false);
Related
function pauseScene(evt:MouseEvent):void
{
stop();
pause_btn.visible = false;
play_btn.visible = true;
}
I have written the above code in Actionscript to stop a mouse event. Now I want to convert that into Javascript so that the scene in flash cc will be converted to Html5. For that I have used the below code as
function pausescene()
{
this.stop();
}
But this is not satisfying my requirement. Please do help me.
event.preventDefault() prevents the default behaviour, but will not stop its propagation to further event listeners.
event.stopPropagation() will not prevent the default behaviour, but it will stop its propagation.
You can use a combination of both.
Example code:
myElement.addEventListener('click', function (event) {
event.stopPropagation();
event.preventDefault();
// do your logics here
});
Reference:
https://developer.mozilla.org/en/docs/Web/API/Event/preventDefault
https://developer.mozilla.org/en/docs/Web/API/Event/stopPropagation
If you can capture the event object, you can use the preventDefault() to stop it
function catchMouseEvent(e){
e.preventDefault();
}
I want to skip certain, uneditable (XML-)tags in my code, using CodeMirror. In order to do that, I have to 'stop' (preventDefault) the keyup event, do some logic and move the cursor. PreventDefault and codemirrorIgnore don't work or do not do what I need them to do. Do I have to catch the event outside CodeMirror? :(
Does not work:
codeMirror.on('keyup', function (cm, ev) {
ev.codemirrorIgnore = true;
ev.preventDefault();
return false;
});
By using the below code you can handle the up arrow functionality
codeMirror.setOption("extraKeys", {"Up":function()
{
console.log("Key Up pressed");
if(true) // logic to decide whether to move up or not
{
return CodeMirror.PASS;
}
}});
It sounds like what you actually want is markText with the atomic and readOnly options, rather than messing with key events (which won't really prevent the user from entering/editing the text).
I want to prohibit the right mouse button. But I find that if I write this:
document.addEventListener('contextmenu', function(event) {
return false;
}, false);
It will not work, the event will still work.
But if I write it like this,
document.oncontextmenu = function() {
return false;
}
The right mouse button will not work.
I wish to know why I can't use addEventListener to stop the event contextmenu.
As stated in "Preventing the Browser's Default Action", the return of false value is not enough for preventing default action. You need to call preventDefault() method on Event object:
document.addEventListener('contextmenu', function(event) {
event.preventDefault();
}, true);
DEMO
I believe you need to useCapture, try passing true as the third parameter to
document.addEventListener() and see if that doesn't solve it for you.
I am trying to develop a word search game in JS which looks like this : https://jquery-wordsearch-game.googlecode.com/svn/trunk/demo.html
BTW I am not using that guy's plugin and instead, trying to develop on my own.
I am using the following code to fire a handler to highlight the cells when a user clicks and moves over them.
$('#puzzlecontainer').on('mousedown','.block',myHandler);
The problem is that the mousedown event is fired on the first cell only. I want handlers to fire on all cells in the path of the mouse.
Also how can I make this compatible with touch events ? I tried touchmove and touchdown.
Please help
UPDATE
With Shusl's help I added the following code :
var ismosedown = false;
$('#puzzlecontainer').on('vmousedown','.block', function(){
globalvars.ismousedown =true;
$(this).addClass("active");
});
$('#puzzlecontainer').on('vmouseover','.block', function(){
if(globalvars.ismousedown){
$(this).addClass("active");
}
});
$('#puzzlecontainer').on('vmouseup','.block', function(){
globalvars.ismousedown = false;
});
vmouseover works as desired on a desktop browser. But it is not working on my Android phone and tablet. Please help.
Fire a function to add and remove an event to be fired on mouseenter. Add this event when the mouse is down and remove it when mouse is up to stop highlighting...
$('#puzzlecontainer').on('mousedown','.block',startSelect);// Run when down
$('#puzzlecontainer').on('mouseup','.block',stopSelect);// Run when up
function startSelect(){
$('#puzzlecontainer').on('mouseenter','.block',myHandler);//Add Handler on enter.
// Fire the mouseenter event for the current element or it will not highlight.
$(this).trigger('mouseenter');
}
function stopSelect(){
$('#puzzlecontainer').off('mouseenter','.block',myHandler);//Remove Handler because mouseup.
}
You can use mouseover event on each cells and set a flag true in myHandler . check if it is true and then treat it as mousedown event
var ismosedown = false;
$('#puzzlecontainer').on('mousedown','.block', function(){ ismosedown =true; } );
$('allcells').mouseover(function(){
if(ismosedown ){ // do works
}
}).mouseup(function(){
ismosedown = false;
});
I'm trying to prevent a mousewheel event captured by an element of the page to cause scrolling.
I expected false as last parameter to have the expected result, but using the mouse wheel over this "canvas" element still causes scrolling:
this.canvas.addEventListener('mousewheel', function(event) {
mouseController.wheel(event);
}, false);
Outside of this "canvas" element, the scroll needs to happen. Inside, it must only trigger the .wheel() method.
What am I doing wrong?
You can do so by returning false at the end of your handler (OG).
this.canvas.addEventListener('wheel',function(event){
mouseController.wheel(event);
return false;
}, false);
Or using event.preventDefault()
this.canvas.addEventListener('wheel',function(event){
mouseController.wheel(event);
event.preventDefault();
}, false);
Updated to use the wheel event as mousewheel deprecated for modern browser as pointed out in comments.
The question was about preventing scrolling not providing the right event so please check your browser support requirements to select the right event for your needs.
Updated a second time with a more modern approach option.
Have you tried event.preventDefault() to prevent the event's default behaviour?
this.canvas.addEventListener('mousewheel',function(event){
mouseController.wheel(event);
event.preventDefault();
}, false);
Keep in mind that nowadays mouswheel is deprecated in favor of wheel, so you should use
this.canvas.addEventListener('wheel',function(event){
mouseController.wheel(event);
event.preventDefault();
}, false);
Just adding, I know that canvas is only HTML5 so this is not needed, but just in case someone wants crossbrowser/oldbrowser compatibility, use this:
/* To attach the event: */
addEvent(el, ev, func) {
if (el.addEventListener) {
el.addEventListener(ev, func, false);
} else if (el.attachEvent) {
el.attachEvent("on" + ev, func);
} else {
el["on"+ev] = func; // Note that this line does not stack events. You must write you own stacker if you don't want overwrite the last event added of the same type. Btw, if you are going to have only one function for each event this is perfectly fine.
}
}
/* To prevent the event: */
addEvent(this.canvas, "mousewheel", function(event) {
if (!event) event = window.event;
event.returnValue = false;
if (event.preventDefault)event.preventDefault();
return false;
});
This kind of cancellation seems to be ignored in newer Chrome >18 Browsers (and perhaps other WebKit based Browsers). To exclusively capture the event you must directly change the onmousewheel method of the element.
this.canvas.onmousewheel = function(ev){
//perform your own Event dispatching here
return false;
};
Finally, after trying everything else, this worked:
canvas.addEventListener('wheel', (event) => {
// event.preventDefault(); Not Working
// event.stopPropagation(); Not Working
event.stopImmediatePropagation(); // WORKED!!
console.log('Was default prevented? : ',event.defaultPrevented); // Says true
}, false)
To prevent the wheel event, this worked for me in chrome -
this.canvas.addEventListener('wheel', function(event) {
event.stopPropagation()
}, true);