I have an element with an onclick method.
I would like to activate that method (or: fake a click on this element) within another function.
Is this possible?
This question is related to
javascript
event-handling
var clickEvent = new MouseEvent('click', {
view: window,
bubbles: true,
cancelable: true
});
var element = document.getElementById('element-id');
var cancelled = !element.dispatchEvent(clickEvent);
if (cancelled) {
// A handler called preventDefault.
alert("cancelled");
} else {
// None of the handlers called preventDefault.
alert("not cancelled");
}
element.dispatchEvent
is supported in all major browsers. The example above is based on an sample simulateClick()
function on MDN.
Using javascript
you can trigger click()
and focus()
like below example
document.addEventListener("click", function(e) {_x000D_
console.log("Clicked On : ",e.toElement);_x000D_
},true);_x000D_
document.addEventListener('focus',function(e){_x000D_
console.log("Focused On : ",e.srcElement);_x000D_
},true);_x000D_
_x000D_
document.querySelector("#button_1").click();_x000D_
document.querySelector("#input_1").focus();
_x000D_
<input type="button" value="test-button" id="button_1">_x000D_
<input type="text" value="value 1" id="input_1">_x000D_
<input type="text" value="value 2" id="input_2">
_x000D_
Once you have selected an element you can call click()
document.getElementById('link').click();
see: https://developer.mozilla.org/En/DOM/Element.click
I don't remember if this works on IE, but it should. I don't have a windows machine nearby.
I haven't used jQuery, but IIRC, the first method mentioned doesn't trigger the onclick
handler.
I'd call the associated onclick
method directly, if you're not using the event details.
This is a perfect example of where you should use a javascript library like Prototype or JQuery to abstract away the cross-browser differences.
Once you have selected an element you can call click()
document.getElementById('link').click();
see: https://developer.mozilla.org/En/DOM/Element.click
I don't remember if this works on IE, but it should. I don't have a windows machine nearby.
Using javascript
you can trigger click()
and focus()
like below example
document.addEventListener("click", function(e) {_x000D_
console.log("Clicked On : ",e.toElement);_x000D_
},true);_x000D_
document.addEventListener('focus',function(e){_x000D_
console.log("Focused On : ",e.srcElement);_x000D_
},true);_x000D_
_x000D_
document.querySelector("#button_1").click();_x000D_
document.querySelector("#input_1").focus();
_x000D_
<input type="button" value="test-button" id="button_1">_x000D_
<input type="text" value="value 1" id="input_1">_x000D_
<input type="text" value="value 2" id="input_2">
_x000D_
I could be misinterpreting your question, but, yes, this is possible. The way that I would go about doing it is this:
var oElement = document.getElementById('elementId'); // get a reference to your element
oElement.onclick = clickHandler; // assign its click function a function reference
function clickHandler() {
// this function will be called whenever the element is clicked
// and can also be called from the context of other functions
}
Now, whenever this element is clicked, the code in clickHandler
will execute. Similarly, you can execute the same code by calling the function from within the context of other functions (or even assign clickHandler
to handle events triggered by other elements)>
For IE there is fireEvent() method. Don't know if that works for other browsers.
I haven't used jQuery, but IIRC, the first method mentioned doesn't trigger the onclick
handler.
I'd call the associated onclick
method directly, if you're not using the event details.
This is a perfect example of where you should use a javascript library like Prototype or JQuery to abstract away the cross-browser differences.
I haven't used jQuery, but IIRC, the first method mentioned doesn't trigger the onclick
handler.
I'd call the associated onclick
method directly, if you're not using the event details.
Once you have selected an element you can call click()
document.getElementById('link').click();
see: https://developer.mozilla.org/En/DOM/Element.click
I don't remember if this works on IE, but it should. I don't have a windows machine nearby.
just call "onclick"!
here's an example html:
<div id="c" onclick="alert('hello')">Click me!</div>
<div onclick="document.getElementById('c').onclick()">Fake click the previous link!</div>
I could be misinterpreting your question, but, yes, this is possible. The way that I would go about doing it is this:
var oElement = document.getElementById('elementId'); // get a reference to your element
oElement.onclick = clickHandler; // assign its click function a function reference
function clickHandler() {
// this function will be called whenever the element is clicked
// and can also be called from the context of other functions
}
Now, whenever this element is clicked, the code in clickHandler
will execute. Similarly, you can execute the same code by calling the function from within the context of other functions (or even assign clickHandler
to handle events triggered by other elements)>
For IE there is fireEvent() method. Don't know if that works for other browsers.
I haven't used jQuery, but IIRC, the first method mentioned doesn't trigger the onclick
handler.
I'd call the associated onclick
method directly, if you're not using the event details.
If you're using jQuery, you need to use the .trigger
function, so it would be something like:
element.trigger('click');
This is a perfect example of where you should use a javascript library like Prototype or JQuery to abstract away the cross-browser differences.
If you're using jQuery, you need to use the .trigger
function, so it would be something like:
element.trigger('click');
For IE there is fireEvent() method. Don't know if that works for other browsers.
var clickEvent = new MouseEvent('click', {
view: window,
bubbles: true,
cancelable: true
});
var element = document.getElementById('element-id');
var cancelled = !element.dispatchEvent(clickEvent);
if (cancelled) {
// A handler called preventDefault.
alert("cancelled");
} else {
// None of the handlers called preventDefault.
alert("not cancelled");
}
element.dispatchEvent
is supported in all major browsers. The example above is based on an sample simulateClick()
function on MDN.
just call "onclick"!
here's an example html:
<div id="c" onclick="alert('hello')">Click me!</div>
<div onclick="document.getElementById('c').onclick()">Fake click the previous link!</div>
You can also try getting the element's onclick attribute and then passing into eval. This should work despite the big taboo over eval. I put a sample below
eval(document.getElementById('elementId').getAttribute('onclick'));
For IE there is fireEvent() method. Don't know if that works for other browsers.
I could be misinterpreting your question, but, yes, this is possible. The way that I would go about doing it is this:
var oElement = document.getElementById('elementId'); // get a reference to your element
oElement.onclick = clickHandler; // assign its click function a function reference
function clickHandler() {
// this function will be called whenever the element is clicked
// and can also be called from the context of other functions
}
Now, whenever this element is clicked, the code in clickHandler
will execute. Similarly, you can execute the same code by calling the function from within the context of other functions (or even assign clickHandler
to handle events triggered by other elements)>
You can also try getting the element's onclick attribute and then passing into eval. This should work despite the big taboo over eval. I put a sample below
eval(document.getElementById('elementId').getAttribute('onclick'));
var clickEvent = new MouseEvent('click', {
view: window,
bubbles: true,
cancelable: true
});
var element = document.getElementById('element-id');
var cancelled = !element.dispatchEvent(clickEvent);
if (cancelled) {
// A handler called preventDefault.
alert("cancelled");
} else {
// None of the handlers called preventDefault.
alert("not cancelled");
}
element.dispatchEvent
is supported in all major browsers. The example above is based on an sample simulateClick()
function on MDN.
just call "onclick"!
here's an example html:
<div id="c" onclick="alert('hello')">Click me!</div>
<div onclick="document.getElementById('c').onclick()">Fake click the previous link!</div>
Once you have selected an element you can call click()
document.getElementById('link').click();
see: https://developer.mozilla.org/En/DOM/Element.click
I don't remember if this works on IE, but it should. I don't have a windows machine nearby.
Source: Stackoverflow.com