I inspected the inbox link in hotmail using firebug and saw something like that:
<a ... href="javascript:; .... />
I just can't figure out how the postback is realizing when I click the link. And what does "javascript:;" mean while it doesn't refer to any function?
The javascript: part there is a pseudo-protocol meaning that the URI should be interpreted as JavaScript code. The ; immediately after it is a statement terminator. Assuming that nothing else follows, it basically makes the link do nothing when clicked.
If something is happening when the link is clicked, I'm guessing a click event handler has been attached to it or one of its ancestor elements. click bubbles up the DOM, so you don't have to watch it actually on the element itself.
You won't necessarily see those event handler attachments in the HTML; the page may well use unobtrusive techniques to hook up the handler later.
Gratuitous live example #1 (hooking the click on the link unobtrusively)
Gratuitous live example #2 (hooking the click on an ancestor element)
It's evaluating the expression ;, which doesn't do anything. It's just there so that there's something in the href (otherwise it won't behave like a link).
The actual behavior is being wired-up somewhere else. For example, it might be wireup up with something like this jQuery statement: $('#inboxLink').click(goToInboxFunction)
Or, as #T.J. Crowder points out, the click handler could be wired-up higher up in the DOM and use event bubbling the capture it for this link.
Related
I am tying to understand a project where used JQUERY to manipulate the DOM.
I have the following element:
<a data-modal-trigger data-modal-target=".modal-confirm" class='confirm-modal-trigger' style='width: 1px;'></a>
In the javascript code I have this tag clicked by the code:
$(".confirm-modal-trigger").click();
But there is no call-back function definiton attached to this event like:
$(".confirm-modal-trigger").click(function(){....});
or
$(".confirm-modal-trigger").on("click", function(){....});
I am searching trough the whole project files and nothing. Then what is the purpose of clicking this a tag if there is no href attribute nor there is a call back function defined when button is clicked?
And the most strange part is that when I comment this line
$(".confirm-modal-trigger").click();
The code doenst work as it should.
* EDIT *
I read the proposed original answer, and I still don't uderstand why when commented the .click() the pop-up window that normally appears (when not commented) doesen't appear when I comment this line. If there is no action behind it - just a sematnic meaning, why I observe that behaviour?
This is a guess (without seeing the codebase) but: most probably the event is delegated to a parent or ancestor element, which could make it quite hard to find in the code.
Say the element .confirm-modal-trigger has a parent, a div with ID "foo". The event may well be bound like so:
$('#foo').on('click', '*', function() {});
or
$('#foo').on('click', '> *', function() {});
or
$('#foo').on('click', 'a', function() {});
...the list of possibilities is potentially endless.
How would i replace internally triggered events of medium-editor with my custom ones or simply change internally designed behaviour?
In this hierarchy
<div>
<textarea class='editable'></textarea>
</div>
I bind a click handler to the div and do e.stopPropagation() and e.preventDefault().
I also try adding after the instantiating of medium-editor.
var editor = new MediumEditor('.editable')
.subscribe("editableClick", function(e){
e.preventDefault();
});
Every way i try textarea gets focused and cursor starts to blink.
For example intial click event adds an element to the dom with a class .medium-editor-element should i dive to source to modify this behaviour?
Or maybe i would like it to work with not a click but a double click.
Anyone familiar with the internal workings of medium-editor?
After trial and error and the help of dev tools i found the way to do what i want.
But i think this question is still answerable because i did it by modifying the source of medium-editor.
So, in medium-editor.js in line 2725 there is setupListener function.
There are 3 main events attached there to case 'externalInteraction': 2731th line.
mousedown,click,focus.
Starting from 2959th line there are the attached handlers for those events.
handleBodyClick,handleBodyFocus,handleBodyMousedown
The mousedown is important for my case because it is the first one that fires and should be prevented and accepted in different cases.
In the end i added a dblclick and handleBodyDblClick to source then put some logic in handleBodyMousedown to prevent the default behaviour of mousedown event in some cases.
Anyway, from the source as i can understand there are no override methods or hooks to modify medium-editor internal events.
It would be nice to have that feature.
Or if i am wrong i would like to know if there is a better way to do all these.
I have a listener on a group of elements:
$('a.menu__link').on('click',function() {alert('function was triggered');});
One element of which is:
<a class="menu__link menu__link--submenu Main" id="Events" href="#">Events</a>
I want to manually trigger a click on the element. Using Chrome dev tools, the event handler is:
a#Events.menu__link.menu__link--submenu.Main
However, the following code does not trigger the listener:
$('a#Events.menu__link.menu__link--submenu.Main').trigger('click');
I have tried every variation that I can think of, but I cannot find the correct reference to trigger the alert function.
What am I doing wrong?
You can use instead click instead of trigger like this to trigger a click :
$('#div').click();
Read more about click here
Here is a JsFiddle
I encased the trigger in a $(document).ready(function()) and that fixed it.
Kudos to Blazemonger for implying that it was a timing issue.
<script>$(document).ready(function() {
$('#Events').trigger('click');
$('#PastSeminars').addClass('menu__link--current');
});</script></body></html>
The lesson? Just because it is the last thing on the page, when in doubt, use document.ready.
Chrome blocks the click event from being programmatically fired. I'd come up with a new solution such as just calling the needed function wherever you need to trigger it.
You can read more about it here: https://teamtreehouse.com/community/why-does-my-onclick-event-not-fire-on-chrome
I have an anchor tag in the website as follows:
<a href="http://www.abc.com/..." class="abc-profileinsider-popup">
<img src="..." />
</a>
The problem is that it never redirects the page to href on being clicked.
Whenever I rename the class abc-profileinsider-popup to X-profileinsider-popup where X is any string apart from abc, it works. Can anybody tell the reason behind this behaviour?
You have a javascript function somewhere that is attaching an event to elements with the class: abc-profileinsider-popup.
This function must be returning false meaning the link doesnt process. Try disabling javascript to confirm this, the link should work with Javascript disabled.
Then search for the code and see what its doing :)
I think there's an event handler in your code that prevents the default behaviour, and that it's specifically attached to elements with
abc-profileinsider-popup class.
If that is the case you should find something like:
myAnchor
.addEventListener("click", function (event) {
event.preventDefault();
});
I would search your codebase for occurrences of the string abc-profileinsider-popup.
That's an article I wrote, in case you need more info about W3C event model.
What does event binding mean? I always come across this word whenever I search around the internet and whatever I try to look for the meaning, it's still vague to me #_#
A while ago, while reading some blogs regarding JavaScript I see people using this sacred word that I cannot grasp.
Event binding refers to telling the browser that a particular function should be called whenever some 'event' occurs. Events mostly relate to user input, such as clicks.
An example of binding to an event in jQuery can be the following:
$("#elem").bind("click", function() {
alert("Clicked!");
});
This binds a function to click event of DOM object with identifier elem. When user clicks it, an alert (message box) will be shown. Binding is done by invoking the jQuery bind function but there are other means to do that, (e.g. jQuery click function in case of binding to click event).
When you bind something to an event, it will be triggered when the event is fired. It's like gluing a fog horn to the brake pedal on your car.
When you perform an action on a web page, it will trigger an event. This might be something like:
Click a button
Select a value from a drop down
Hover the mouse over an item
These events can be captured in your JavaScript code.
A common (and often misguided) way of capturing events is to do so on the HTML element itself (as shown in the onclick attribute below)
<input id="MyButton" type="button" value="clickme" onclick="Somefunction()" />
So, when the user clicks the button, the SomeFunction function will be executed.
However, it is considered a better approach to adopt a technique called 'late-binding'. This ensures that your HTML and JavaScript are kept completely separate.
So, we can modify the above exmample like so:
document.getElementById("MyButton").onclick = function(){
//functionality here.
}
jQuery makes this even easier:
$("#MyButton").click(function(){
//functionality here.
});
Binding in JS, is to capture some events (like focus, click, onmouseover, etc) and perform some other stuff before the actual process starts.
Detailed explanation:
http://triaslama.wordpress.com/2008/07/22/four-ways-javascript-binding-event-listeners/
http://api.jquery.com/bind/