Javascript : RemoveEventListener with Anonym Function - javascript

How to remove and event listener with an Anonym function , with removeEventListener();
document.getElementById("object").onclick = function(e){
if(e && e.stopPropagation) {
e.stopPropagation();
} else {
e = window.event;
e.cancelBubble = true;
}
}
So I have this piece of code and the function what's called must be anonym I'dont know why but If it's not then doesn't works correctly, maybe beacuse of the event :|
But If it's anonym how can I remove it?

Well you havent added an actual event listener, you have just populated the onclick variable with a function to be run. So you should be able to just use something like this:
document.getElementById("object").onclick = false;
EDIT
Just tried it in jsFiddle and what I suggested works.

Just give it a null value, which is the starting value when onclick is not initialized:
document.getElementById("object").onclick = null

Related

Disable a table cell after the first click in javascript

I have a table cell as the following :
<td id=report onMouseUp='clickReport()' onKeyPress='clickReport()' >Click</td>";
The event function is as below :
function clickReport() {
document.form.submit();
}
On form submission, there is a back-end process going on. Until the 1st process completes(i.e., until the page reloads), I do not want the user to press the press the "Click" again, else it may affect the previous running process.
So, I thought of disabling the "Click" after the first press.
I tried using preventDefault() but it is not working.
function clickReport() {
document.form.submit();
document.getElementById("report").onMouseUp = function(e)
{
e.preventDefault();
return false;
}
document.getElementById("report").onKeyPress = function(e)
{
e.preventDefault();
return false;
}
}
Can someone please help!
1) You might pass the element parameter to your event functions, so you can acces the DOM element easily. See below.
<td id=report onMouseUp='clickReport(this)' onKeyPress='clickReport(this)' >Click</td>";
2) On the first function run you might null the events, so they will not fire anymore. See below.
// the *element* parameter is yor <td> element here
function clickReport(element) {
document.form.submit();
element.onMouseUp = null;
element.onKeyPress= null;
}
3) You might use onclick event instead of onmouseup and get rid of onkeypress, if you only want to make it work on click.
<td id=report onclick='clickReport(this)'>Click</td>";
function clickReport(element) {
document.form.submit();
element.onclick= null;
}
Working codepen: https://codepen.io/anon/pen/MmVNMe
this should work.
since at first the disableClick is undefined the click will fire, as soon as it fires the flag will be set to true and the click will no longer be possible.
<td id=report onMouseUp='!disableClick && clickReport()'
onKeyPress='!disableClick && clickReport()' >Click</td>"
function clickReport() {
document.form.submit();
window.disableClick = true;
}

JS onkeydown/onkeyup - convert to jQuery keydown/keyup

I currently have some js for phone number validation that is using inline event listeners in the input field. I need to change this example so that instead of attaching the event listeners inline, I would be targeting the DOM element in jQuery and adding the event listeners. Here's a working example of what I have so far: http://jsfiddle.net/yVdgL/21/
window.mask = function (e,f){
var len = f.value.length;
var key = whichKey(e);
if((key>=47 && key<=58) || (key>=96 && key<=105))
{
if( len==1 )f.value='('+f.value
else if(len==4 )f.value=f.value+')'
else if(len==8 )f.value=f.value+'-'
else f.value=f.value;
}
}
function whichKey(e) {
var code;
if (!e) var e = window.event;
if (e.keyCode) code = e.keyCode;
else if (e.which) code = e.which;
return code
}
and
<input type="text" name="phone" id="phone" onkeydown="mask(event,this)" onkeyup="mask(event,this)" maxlength="13" />
I tried this but was unable to achieve the functionality that I need.
i have update you jsfiddle example:-
jQuery(document).ready(function(){
jQuery('#edit-phone1').keyup(function(event){
mask(event,this);
});
jQuery('#edit-phone1').keydown(function(event){
mask(event,this);
});
});
click here to see working example:-
http://jsfiddle.net/yVdgL/38/
or you can try :-
$(document).ready(function() {
$('#edit-phone1').on("keyup keydown", function(e) {
mask(e, this);
});
});
link for this is:-http://jsfiddle.net/yVdgL/56/
In older, pre-HTML5 browsers, $("#phone").keyup( function ) or keydown is definitely what you're looking for.
In HTML5 there is a new event, "input", which behaves exactly like you seem to think "change" should have behaved - in that it fires as soon as a key is pressed to enter information into a form. $("#phone").bind('input',function);
You never defined event.
jQuery('#edit-phone1').keyup(function(){
jQuery('#edit-phone1').mask(event,this); //<-- what is event?
});
just add it
Second issue is you are treating window.mask like a jQuery plugin and it is not a plugin.
jQuery('#edit-phone1').keyup(function(event){ //<-- add event here
mask(event,this);
});

jquery stopPropagation() and sending "event"?

(jsbin)
I created a table with a button inside.
The Table has onclick event and also the inside Button
But when Im pressing the button ,the event bubbles up to the table. ( and I get 2 alerts)
So I used ev.stopPropagation();
And its working. But in order for it to work , I had to do :
in html :
<input type='button' onclick='doWork(event);'/>
in Js :
function doWork(ev)
{
ev.stopPropagation();
alert('button');
}
Is this the correct way ?
Must I send the event ? I know that different browsers uses differently the event .
IE doesn't require passing event object and we can access it using window.event. Old IE versions have not supported e.stopPropagation. So, for cross browser compatability reason, you should try this:
function doWork(e)
{
var evt = e || window.event;
if (evt.stopPropagation) {
evt.stopPropagation();
}
else {
evt.cancelBubble = true;
}
alert('button');
}
This is another way:
<table onclick="doWork();" border=2 style="width:70px;">
<input type='button' onclick='alert("button");'/>
function doWork(ev)
{
ev = ev || window.event;
var target = ev.target || ev.srcElement;
if(target.tagName.toUpperCase() !== 'INPUT'){
alert('table');
}
}
I can't see anything wrong with this, and yes, you need to parametrise the event so you can call stopPropagation() on it in your event handler.

How to enable on click after removing it?

I have two conditions here, cond1 and cond2 .If its the cond1 I will disable my onclick event, else I will enable it.
This is what I fished out :
if(cond1) {
document.getElementById('mTag').removeAttribute("onclick");
} else {
document.getElementById('mTag').setAttribute('onclick');
}
The problem is once the onclick gets disabled , its not getting enabled again. If its cond2 , then it must be enabled . What am I doing wrong? Kindly suggest some solution to this.
Why would you do that? This will be annoying user experience anyway. Better is to disable/enable the tag:
document.getElementById('mTag').disabled = cond1;
To prevent the click event, you have to prevent the event from bubbling upwards.
document.getElementById('mTag').onclick = function(e) {
if (!e) var e = window.event;
event.cancelBubble = !cond1;
...
};
You did it wrong. Removing the attribute doesn't unbind the event.
This is the right way:
document.getElementById("mTag").onclick = null;
you don't need to remove onclick attribute you can set a flag in your handler
var enable;
function myhandler() {
if (enable) {
//my code
}
}
if(cond1){
enable = false;
} else {
enabled = true;
}
I think it's better to set a flag, and check for that flag at the beginning of your handler:
function handler(event) {
if ( !this.flag )
return;
// do the actual handling
}

Javascript return false - from function

Is there any way to do the following:
validateLogin();
return false;
But actually like this..
validateLogin();
And here is the function:
function validateLogin(){
if(hi=true){
return true;
}
else{
return false
}
I want to attach this function for the event of a form being submitted, so if HI is false - i want to return false; meaning it will stop for form from submitting.. i know return false; will do so i just need to know how i can get this return back to the parent function?
Thanks in advance!
You can use it as follow:
return validateLogin();
however, as mmayo pointed out, don't forget about the return value:
event.returnValue = false;
You can eventually do that:
return validateLogin();
Note that your function code has some errors (maybe due to the simplification of the code you made to post this question?). You'd better write this method like that:
function validateLogin(){
...
return hi;
}
Note also that insted of having if (hi=true) {, you must write if (hi == true) {, or better if (hi) {...
I use the following to stop events...
event.returnValue = false;
cresentfresh inspired me to do some research... here is an article with a compatibility matrix.
There are also related threads on SO.
return validateLogin();
This should do what you want.
The standard way of stoping the default action of an event is:
event. preventDefault();
You may also want to prevent event propagation with event.stopPropgation(); to stop further event listeners from executing.
http://www.w3.org/TR/2001/WD-DOM-Level-3-Events-20010823/events.html#Events-Event
However, IE will not recognize this which is why you can set event.returnValue to false for IE.
eg:
if (event && event.preventDefault) event.preventDefault();
event.returnValue = false;
You can also return false from the event handler for events inlined in HTML.
<form onsubmit="return validateLogin()">
This is not considered best practice however.
Note: the event object is passed in as the first argument in your event listener.
eg:
function validateLogin(e) {
e; // is the event object
}
For IE you may need window.event.
function validateLogin(e) {
e = e || window.event; // is the event object
}
Try double == (IF I==5)
validateLogin() Function
function validateLogin() {
return hi;
}
HTML block
<form onsubmit="return validateLogin()">
...
</form>

Categories