how to trigger onmouseup handler from javascript
i have my button
<input id="x" onmouseup="doStuff()">
and i want to trigger
document.getElementById("x").onmouseup();?????
If you want to use event binding there is always this way of doing things
document.getElementById("x").addEventListener("mouseup", function(){
alert('triggered');
}, false);
Here is the example JSFiddle of it.
Or if you want to actually "Trigger the event" try this
var evt = document.createEvent("MouseEvents");
evt.initEvent("mouseup", true, true);
document.getElementById("x").dispatchEvent(evt);
You've already answered your question :)
Simply call
document.getElementById("x").onmouseup()
in your code.
I've added an example here:
http://jsfiddle.net/cUCWn/2/
How about binding the mouseup event of "x" to a function, and then call that function from doStuff?
You pretty much have the answer there.
<input id="x" onmouseup="doStuff()" />
and then just declare your function
<script type="javascript">
function doStuff() {
alert("Yay!");
}
</script>
Alternatively, you can attach the event from Javascript. i.e.
<script type="text/javascript">
var x = document.getElementById("x");
x.onmouseup = doSomething;
function doSomething() {
alert("Yay!");
}
</script>
Related
I would like to add an onchange event to those input fields without jquery:
<input type="text" id="cbid.wizard.1._latitude">
<input type="text" id="cbid.wizard.1._longitude">
I can already call the object with
<script type="text/javascript">
alert(document.getElementById('cbid.wizard.1._latitude').id);
</script>
In the end, I want to add this behaviour, that if you enter a pair of coordinates into the first input, I will spread the pair over the two input fields?
How do I add an onchange event with javascript?
Ummm, attach an event handler for the 'change' event?
pure JS
document.getElementById('element_id').onchange = function() {
// your logic
};
// or
document.getElementById('element_id').addEventListener(
'change',
callbackFunction,
false
);
jQuery
$('#element_id').change(function() {
// your logic
});
Note
Note, that change event on the text field will be fired after the blur event. It's possible that your looking for keypress event's or something like that.
document.getElementById('cbid.wizard.1._latitude').onchange = function(){
//do something
}
GlobalEventHandlers.onchange docs
or
document.getElementById('cbid.wizard.1._latitude').addEventListener("change", function(){
//do something
});
EventTarget.addEventListener docs
use addEventListener in your window.onload
window.onload=function(){
document.getElementById('cbid.wizard.1._latitude').addEventListener("change", function(){
//do something
});
};
addEventListener
Please try with the below code snippet.
<body>
<input type="text" id="cbid.wizard.1._latitude">
<input type="text" id="cbid.wizard.1._longitude">
<script type="text/javascript">
var txt1 = document.getElementById('cbid.wizard.1._latitude');
txt1.addEventListener('change', function () { alert('a'); }, false);
</script>
</body>
This question already has answers here:
How to stop event propagation with inline onclick attribute?
(15 answers)
Closed 9 years ago.
consider following,
<body>
<form id="form1" runat="server">
<div>
<input type="text" id="txt1" />
<input type="button" id="btn1" value="Submit"/>
</div>
</form>
<script>
$("#txt1").live("blur", function () {
console.log('blur');
return false;
});
$("#btn1").live("click", function () {
console.log('click');
return false;
});
</script>
</body>
Above code will log blur event and click event on trigger of respective events.
If click or change something in text box and then click on button btn1 blur and click event will happen respectively.What i want is if blur event is happening because of btn1 then click event should not happen,it should log only blur event,I want to stop click event from happening.
How to do this? Can anyone help?
try this
<form id="form1" runat="server">
<div>
<input type="text" id="txt1" />
<input type="button" id="btn1" value="Submit"/>
</div>
</form>
javascript code
$("#txt1").on("blur", function (event) {
event.preventDefault();
alert('blur');
return false;
});
$("#btn1").on("click", function (event) {
event.preventDefault();
alert('click');
return false;
});
also test it here and remember live keyword is deprectaed from jquery 1.9 use on instead of live in jquery 1.9 or greater.
Here is one way to solve it by adding a timeout.
var inFocus = false;
$("#txt1").focus(function () {
inFocus = true;
$("#log").prepend("<p>focus</p>");
});
$("#txt1").blur(function () {
setTimeout(function(){inFocus = false;},200);
$("#log").prepend("<p>blur</p>");
});
$("#btn1").click(function () {
if (!inFocus) {
$("#log").prepend("<p>click</p>");
}
});
In the fiddle example, I put the log out to the window.
You cannot "stop" an other/foreign event like so. Event.preventDefault() and/or Event.stopPropagation() (which both will get triggered when returning false from within a jQuery event handler), will allow you to stop and prevent the exact same event from further processing on parent nodes.
In your instance, you need your own logic. Use some variables and set them properly and check the value where necessary. For instance, on click you set FOOBAR = true and in blur you check if( FOOBAR ) and act on that.
You need to destroy one event see the demo
Hope this helps you.
jsfiddle.net/rkumar670/5a86V
I have the event listener like these:
document.getElementById("A").addEventListener("change", function (e) {
// do something with e parameter when A change
}, false)
document.getElementById("B").addEventListener("click", function (e) {
// do something with e parameter when B click
}, false)
I've 2 questions:
how should I write it in event handler version?
how should i call it?
It should be some kine like this:
<script type="text/javascript">
function [this is question number 1]
{
// do something with e parameter when A change
}
function [this is question number 1]
{
// do something with e parameter when B click
}
</script>
<div id="A" change="[this is question number 2]"></div>
<div id="B" click="[this isquestion number 2]"></div>
Regards,
Dav
You can do that :
<script type="text/javascript">
function question1a(e)
{
// do something with e parameter when A change
}
function question1b(e)
{
// do something with e parameter when B click
}
</script>
<div id="A" onChange="question1a(event)"></div>
<div id="B" onClick="question1b(event)"></div>
You have an example here: JSFiddle
Event handler is similar to event listener. This is just an inline version of your own version. Depending on your purpose, this is not recommended due to lack of performance and HTML maintainability.
You can read this article : http://robertnyman.com/2008/11/20/why-inline-css-and-javascript-code-is-such-a-bad-thing/
Hope it helps !
Regards
How to call two methods on button's onclick method in HTML or JavaScript ?
Try this:
<input type="button" onclick="function1();function2();" value="Call2Functions" />
Or, call second function at the end of first function:
function func1(){
//--- some logic
func2();
}
function func2(){
//--- some logic
}
...and call func1() onclick of button:
<input type="button" onclick="func1();" value="Call2Functions" />
As stated by Harry Joy, you can do it on the onclick attr like so:
<input type="button" onclick="func1();func2();" value="Call2Functions" />
Or, in your JS like so:
document.getElementById( 'Call2Functions' ).onclick = function()
{
func1();
func2();
};
Or, if you are assigning an onclick programmatically, and aren't sure if a previous onclick existed (and don't want to overwrite it):
var Call2FunctionsEle = document.getElementById( 'Call2Functions' ),
func1 = Call2FunctionsEle.onclick;
Call2FunctionsEle.onclick = function()
{
if( typeof func1 === 'function' )
{
func1();
}
func2();
};
If you need the functions run in scope of the element which was clicked, a simple use of apply could be made:
document.getElementById( 'Call2Functions' ).onclick = function()
{
func1.apply( this, arguments );
func2.apply( this, arguments );
};
The modern event handling method:
element.addEventListener('click', startDragDrop, false);
element.addEventListener('click', spyOnUser, false);
The first argument is the event, the second is the function and the third specifies whether to allow event bubbling.
From QuirksMode:
W3C’s DOM Level 2 Event specification pays careful attention to the problems of the traditional model. It offers a simple way to register as many event handlers as you like for the same event on one element.
The key to the W3C event registration model is the method addEventListener(). You give it three arguments: the event type, the function to be executed and a boolean (true or false) that I’ll explain later on. To register our well known doSomething() function to the onclick of an element you do:
Full details here: http://www.quirksmode.org/js/events_advanced.html
Using jQuery
if you're using jQuery, there is a nice API for event handling:
$('#myElement').bind('click', function() { doStuff(); });
$('#myElement').bind('click', function() { doMoreStuff(); });
$('#myElement').bind('click', doEvenMoreStuff);
Full details here: http://api.jquery.com/category/events/
<input type="button" onclick="functionA();functionB();" />
function functionA()
{
}
function functionB()
{
}
Hi,
You can also do as like below... In this way, your both functions should call and if both functions return true then it will return true else return false.
<input type="button"
onclick="var valFunc1 = func1(); var valFunc2 = func2(); if(valFunc1 == true && valFunc2 ==true) {return true;} else{return false;}"
value="Call2Functions" />
Thank you,
Vishal Patel
I have an image:
<img id="reqPic" src="mark.png" />
I also have declared a flag earlier on in the page:
<script type="text/javascript">
var isToolTipEnabled = true;
</script>
I now want to be able to check the flag and if its true, assign the onmouseover and onmouseout events. However, the onmousover event has to be changed to another function called Tip('string') which takes in a string. I have seen other questions on here on how to change this but it I dont see how I can pass paramters to the new function I want to change to.
The onClick would be changed to something like this:
onClick="javascript:toggleHelp('reftypeHelp');";
Any help on this would be greatly appreciated.
Thanks!
document.getElementById("reqPic").onmouseover = function() { Tip('This is the string.'); };
You could have an onload event on your body tag which calls a function that checks necessary values.
<script type="text/javascript">
var isToolTipEnabled = true;
function eventAdder() {
if (isToolTipEnabled) {
var img = document.getElementById('reqPic');
img.onmouseover = function() {
Tip('string');
}
img.onmouseout = whateverElse;
}
}
</script>
<body onload="eventAdder();">
with jQuery you could use the hover function but yeah creating an inline function works too