is it possible to make a javascript to "click" a specific element?
on my page I've got a with a specific id, and I want to make a JS script to click the div on certain event. is there any method like:
document.getElementById("idofdiv").click()?
Yes, it is possible to trigger a click event by javascript.
document.getElementById('element').click();
Or with jQuery:
$('#element').click();
Please note that the click event won't work if you are trying to force a click on an anchor tag which opens a page. There are tricks called as "clickjacking" which you can use to force it, but this way you're cheating the user.
you can do:
document.getElementById("idofdiv").onclick = function() {
//your code here
}
or
document.getElementById("idofdiv").onclick = someFunction;
function someFunction() {
//your code here
}
See:: onclick
http://www.w3schools.com/jsref/met_html_click.asp
I guess you answered your own question.
Related
i'm creating an application where a user can make a html layout and attach javascript to it.
Now i'm trying to make it so when they click a button, they go to a preview mode where they can see it in action.. so when they click i add the javascript tag ( with their javascript) in the head of the iframe.. this all works fine!
But the problem is when they leave the preview mode, i remove the javascript tag, however when i have code like this:
$('#button').click(function()
{
alert("ok");
});
it still alerts ok when i click the html button (when not in previewmode!), which shouldn't happen!
It seems that when removing the javascript tag, the listeners aren't removed.. Or am i doing it wrong?
Now my question: is there a way to make it so these added eventlisterens are removed when i remove the script tag?
AND YES: i know you can remove eventhandlers with .off(), but since i already have event handlers attached, these will be removed also, and i don't want this!
So two options i can think off:
- rebuild the whole iframe
- store the eventhandlers that were added by the user and when leaving the preview mode, removing them.
Thanks in advance
Each time you "evaluate" JavaScript, it becomes part of the browser's "image", and whether the source is present on the page no longer matters. You need to manually unbind the event, or replace the html segment to which the event was bound.
To remove events from an html element, you can use:
element.parentNode.innerHTML = element.parentNode.innerHTML
This rebuilds the DOM tree using the same HTML.
you need to unbind event.
You can do it by using jquery unbind() or off()
like this:
$("#button").unbind("click");
or
$("#button").off("click");
Demo: http://jsfiddle.net/a6NJk/664/
jquery Doc: http://api.jquery.com/off/
Another good answer: Best way to remove an event handler in jQuery?
Set the event:
var $button = $('#button');
$button.on("click", function() {
alert("ok");
});
Take off the event:
$button.off("click");
You can take off that specific function too
var $button = $('#button');
var eventFunction = function() {
alert("ok");
});
// Set event up
$button.on("click", eventFunction);
// Take event off
$button.off("click", eventFunction);
If you want to remove all events from an element you can use
$("#yourSelector").off()
Because it's not jQuery in general but also vanilla javascript, it would be too much work to keep track of javascript changes, so rebuilding the iframe would be the best option here.
I wrote this script for javascript disabled browser.
Here is HTML:
Google
Here is Javascript:
<script type="text/javascript">
function jstest() {
alert("Success");
// show popup
return false;
};
</script>
If javascript is enabled it should alert a popup showing success. And if it is disabled it should move to google page. I was told to do this by a friend. It works on jsFiddle.net. But not working if i try to do this in my work.
It shows popup when i click and when i close popup it moves onto google page.
I want it to stay on the same page. I dont want it to move on link page.
It should move only if javascript is disabled.
What have i done wrong in this script?
Thank You,
Kishore.
You need to include that script after the element it tries to assign the onclick handler to. Or wrap that code in an onload handler. Otherwise the JS executes before the element has been parsed so getElementById("goo") doesn't find it.
By the way, you don't need an inline html attribute onclick as well as assigning a handler in your JS. The attribute is trying to call a global function called jstest() which doesn't exist in your code. You could remove the document.getElementById("goo").onclick = part and just declare the function with the same name as used in the inline html attribute onclick.
I would guess it works on jsfiddle.net because by default jsfiddle wraps your code in an onload handler (you can change this via the panel on the left).
Try this as your hyperlink:
<a href="http://www.google.com/" onClick="return jstest();">
The return within the onClick should confirm that the return false from your function should bubble up to the hyperlink's behavior.
Don't understand why you have an onclick embedded in your tag
jQuery :
$(function() {
$("#goo").click(function(e){
e.preventDefault();
// Do whatever you want here
})
})
You can do it something like this using jQuery
$(document).ready(function() {
$("#goo").click(function(event){
event.preventDefault();
alert("Success");
});
});
Hope this helps
Here is a Link
Let's say I have a greasemonkey-type user script running on a page that has a div such as:
<div id="watchme">something</div>
Is it possible to detect if a user clicks on that div from within the user script? The logical way would be to have an onClick() written into the code, but since this is a user script I don't control the code.
Did you try attaching an event listener?
document.getElementById("watchme").addEventListener("click", yourHandler, false);
Note that assigning the onclick method may not work: see this.
document.getElementById("watchme").onclick = function(){
alert("I've been clicked");
}
That's how you assign the onclick event in js.
Javascript is not my speciality.
I have a page that contains an image. This image, when clicked, fires an Ajax code, that shows a floating box. Analyzing the page code, I don't see how this button can fire the code.
The button is declared like this:
<div class="leaderboard-text">
<span id="addon-add-language-button">
<image class="ajaxListAddButtonEnabled" listId="localizationList"
src="/itc/images/blue-add-language-button.png" />
<image class="ajaxListAddButtonDisabled" listId="localizationList"
style="display:none;"
src="/itc/images/blue-add-language-button-disabled.png" />
</span>
</div>
just after this code, I see this var being declared:
<script language = "Javascript">
var createList_localizationList = function() {
var reorderEnabled = false;
var preventLastRowDeletion = false;
var searchEnabled = false;
var list = new LCAjaxList();
list.initialize():
}
document.observe("dom:loaded", createList_localizationList);
</script>
As far as I see, the image is firing somehow this javascript, but how can the button do that if there's no "onclick" or href reference tied to it? Where is the line that tells which method should run when the image is clicked?
What should I look on the code to get a clue how this button works?
What I need is to fire the method used by this button using javascript.
any clues?
================
after reading all that you guys have written, I have used Safari's Inspect Element and identified this listener attached to the object:
is this of any help? Now the question: how do I fire the method associated with this image from javascript? Thanks guys.
My guess is that it's either one of the two statements
var list = new LCAjaxList();
list.initialize():
They seem really bad designed. A list object should take a DOM object to act upon. LCAjaxList probably hardcodes the element to bind to.
What you're looking for is .observe. That adds an event listener, so somewhere there may be
$('addon-add-language-button').observe('click', SomeFunction)
Event listeners are the preferred way to handle javascript events, rather than using an HTML onClick.
When the DOM is completely loaded on the page it fires the event listener "createList_localizationList", so there is no need for a user to click on anything. You can add an event liseter to the button for onclick, instead of when the DOM loads with your button.
You could try this:
$('ajaxListAddButtonEnabled').observe('click', createList_localizationList);
I am not sure if that class is used again, but maybe if you add an id to that element (id='someidname') to make sure you are not adding this to another element on the page.
From my experience I know three different ways to execute a JavaScript function when a user clicks on a link
Use the onclick attribute on the link
click me
Use the href on the link
click me
Don't touch the link, do everything in js
click me
(in the JavaScript we will stop the default event, and call the function)
Which one is better? What are the advantages and disadvantages?
EDIT deleted the "javascript:" on onclick
Unobtrusive Javascript (your third example) with graceful degredation is the best choice.
It is always good to have a link in the href attribute so as to support users who have disabled JavaScript on their browsers.
click me
None of the above. Use the click event (assigned either as an attribute or via script if you prefer) and have a real URL as a fallback:
click me
or HTML:
click me
Script:
document.getElementById("myLink").onclick = function() {
myfunction();
return false;
};
Also, don't prefix code in event handler attributes with javascript:. It's incorrect and only doesn't throw an error by coincidence (which is that in JavaScript, javascript: creates a label called javascript).
Or alternatively, use jQuery
$(function() {
$('[id$=myLinkID]').click(function(e) {
myFunction();
});
});