I just want to understand the concept of event bubbling, capturing and delegation. I have read a lot about them but still unable to fully understand them (capturing, bubbling, delegation).
View 1 RepliesIs there a subset of acceptable selector syntax available when using .on() ? I notice that given markup
<ol id="root">
<li id="a">A
<ol>
[code]....
the below code is for a form that is validated against some external (valid.js) functions. It's my first forray into Event Delegation and stupidly (testing in FF only just now) I didn't realise that the addEventListener isn't recognised in IE. Anyone got an idea which way I should look at sorting it. I am still searching and playing around but can't seem to find the right solution.
[Code]...
Wanting to have a table cell select it's contained radiobutton in a
rather non-specific way, I wrote the following javascript:
function click_it(element)
{
var x = element.childNodes
for(var i=0;i<x.length;x++)
{
var tag = x[i];
if(!tag.tagName || tag.tagName != "INPUT")
continue;
tag.checked = !tag.checked;
}}
It works fine for clicking the table cell and selecting contained
radiobuttons. However, when actually clicking the radiobutton, the
browser decides (correctly) to first fire the internal radiobutton
click event, thus selecting the radiobutton - and THEN fireing the
click handler for my table cell, thus de-selecting it again :-P If
this was to only work for radiobuttons, I could easily make it do
"tag.checked = 1" every time, but it needs to work for checkboxes too,
so the de-select should work too (if checked).
have a small div above (hover) a big one. I assign onmouseover and onmouseout events to the wrapper div. For image caption roll-over animation. The problem is when the mouse is above the caption itself, causing an unwanted result(probably event bubbling).
And another problem: sometimes when you move mouse from outside to container you get a a triple debug sequence: (it should be just 2): -I am over- -I am out- -I am over- (firebug console) How to make it work? (no jquery) must work on all browsers.[URL]... The wanted result: When mouse moved over the image, only mouseover event should be raised once When mouse moved out from the image, only the mouseout event should be raised. when mouse is over the captionm it should be treated as if the mouse is still on the image. (no flickering)
Ive written this source
[Code]...
I am trying to organise some code on a large project I'm doing which changes a lot of code around the page with submit forms. As jQuery doesn't have a live support for submit elements I thought I'd try my hand at event bubbling. It works nicely in firefox but isn't working at all in IE.
[code]
$('#data').submit( function(e) {
/* When a edit form is selected */
if (e.target.className == 'edit_link'){
//ajax request
}});
[/code]
I have a div with an id #data inside this div is a table with data and forms at the end of each of the row to edit parameters. When I click edit it loads a form in another div outside the #data one via ajax then the user can change the values and hit update (which has a class of .edit_link ) at which point it should reload the #data div. The reloading of the #data div is why I need some sort of live event to it. I've tried doing the way above and it works great in firefox but not in IE. Just to clarify the submit doesn't fire at all.
I've been implementing a drop menu in javascript, and I'm finding it difficult to understand why the event bubbling system is implemented as it is. In summary, I want an event to occur when the mouse enters/exits a large div or table that contains many descendent elements.
It appears to me, from experimenting with IE6 and Moz 5, that the event is generated *only* on the lowest element, thus given a table which contains tbody, tr and tds, with an onmouseover listener assigned to the table element (as a property), the onmouseover event is generated only for the td, although the mouse actually entered all these elements.
If there is a slight gap between elements you sometimes get events for the higher element. I guess this is a side-effect of the browser's implementation - sampling the mouse position.
My understanding of event bubbling from "JavaScript the definitive guide" is that events should bubble up the heirarchy unless they are stopped by the stopPropagation() method.
building a tree using UL,LI tags as below. Issue seems with cancelling event bubbling. trying to cancel dragenter event to avoid dragenter firing for root LI. dragenter on image cancels bubbling. But dragenter on the child text bubbles and fires for Root. Whole purpose is to identify LI where its dropped. Edit: Noticed this is working as expected in IE6 and not working with IE8.
[Code]...
I'm in the process of integrating the google maps api into my application. Unfortunately, my events seem to be bubbling. If I open the google maps info window 3 times and click the next button respectively, on the forth time when I click the next button the next event will fire four times. How do I stop this?
$("#google_map_canvas").on("click", "#next", function() {
var toHighlight = $('.first').next().length > 0 ?
$('.first').next() : $('#infoWin li').first();
$(this).fadeOut(100);
$('.first').fadeOut(100);
$('.first').delay(100).removeClass('first');
toHighlight.delay(100).addClass('first');
$('.first').delay(100).fadeIn(100);
$(this).delay(100).fadeIn(100);
});
I have a<button>element inside of which I have 2<span>elements. I have 2 attached jquery click event handlers for each of the span elements so I can do whatever I like for each click. This is all working fine in Chrome and the click event is captured in the correct order: first on any of the span elements and then the event bubbles up to the parent button element. The problem is that in Firefox the click event does not fire for any of the span elements, just the button event handler logs the event as being fired.[URL]..
View 4 Replies View RelatedI'mtryingto put the right code in place to stop event bubbling on my menu script. I have a the following code for the mouseenter event. I can't find where's appropraite to put stopPropagation()
menu_trigger is an array which is cycled through to put the mouseenter event onto the right <th> tags menu_objects is an array linking to the menu which should be shown.
[Code]...
im having trouble using JQUERYs animate function. Basicly the div has a mouseover event that slides another div (that is inside the original div) upwards. The first div has a mouseout event that slides the second div downwards and out of view. The problem being that when you hover over the second div it fires the first divs mouseout event. Ive tried googling this and have tried adding some event bubbling but having serious trouble with it. here is the website... [URL] hover over the image and you should see the caption appear, roll over the caption and it goes crazy.
[Code]....
how to capture onkeyup event from an editable iframe in firefox?
View 3 Replies View RelatedI'm trying to do a form validation...however, i can't get the submit event to work. So I tried to alert a message when the form submits. But the form submits without going through the submit function.
Heres the code
embeded in validateContactForm.js
Code JavaScript:
$('form').submit(function(){
alert('dfd');
return false;
[Code].....
Probably covering well trodden ground here but so far I haven't found any reliable solution and "it can't be done" seems crazy. Here goes:I have some Flash and non-flash banners that are to be embedded into my page - all managed by a simple CMS. The Flash movies are not created by me as they are for 3rd Party advertisors, and I do not want to be doing any Flash programming myself as it's not my thing and I don't have the resource to do it. As with the JPEG/GIF files - I just want to be given the file and then embed it.
What I want to do is produce some MI based upon when the various banners are clicked - things like how many clicks and who clicked them (users are logged into the web site so I can track them). Simple enough for JPEG/GIF banners capturing the onclick event but for Flash it seems that the Flash movie prevents (or overrides) the onclick event from registering.This seems crazy! I want my application logic (in this case logging user activity) to be independant of the media content - especially as I am not in control of the media content.Googling and experimentation shows that for IE I can seemingly use "onfocus" but this is not very satisfactory and of course I need a cross browser solution.This seems like such a simple concept that at the time of specifying the requirements it didn't occur to me that this might not be possible.... but it seems that I may be wrong!
Is it possible to capture the domain change event OR domain of the target site in javascript? To elaborate, suppose I am on my site (www.mydomain.com) and if I type www.someotherdomain.com in the address bar, I want to capture the target URL/domain i.e. someotherdomain.com in the javascript code of my site (mydomain.com). I am trying to call sign-off function of my site upon customer navigation to some other site without loggin off. I can not use body/window onUnload function because I have a common layout JSP that would be reloaded for each and every page. So I am trying to capture the URL/domain of target site and check if it is different from teh current domain; Then only I will call my sign-off function to kill the customer session.
View 2 Replies View RelatedOne thing I haven't figured out about javascript is the treatment of
__proto__.
Inheritence, whether prototypes or class-based, is just a shorthand
form of delegation (leaving aside dynamic dispatch).
In Java a derived class serves as a wrapper for its superclass. The
derived class can easily access members of its super class using the
nice "super" keyword. Why, in javascript, is this functionality buried
in the unofficial "__proto__" property? It seems that it must have
been the intent of the language designer that explicitly accessing the
prototype chain is a bad thing for some reason, although I can't see
any reason.
By googling, you can find a lot of weird hacks to add "super"-like
functionality to javascript, although many of them look misguided to
me. It certainly seems that this is a commonly confusing part of the
language.
If __proto__ were an official part of the language, implementing a
decorator or proxy pattern would be nicely simplified compared to
class-based inheritence. The "before-and-after" style of AOP (which is
just another style of shorthand for delegation) would be possible
without any crazy tricks.
So, anyone care to set me straight? Why isn't __proto__ or something
like it a well defined part of javascript? Shouldn't it be?
I have a div called 'options' which contains another called 'settings'. I want 'settings' to have a left border when the mouse is over 'options', but not when it's over 'settings'. I tried the code below but the style isn't being overwritten by the second onmouseover function.
function sett() {
var o = document.getElementById('options');
var s = document.getElementById('settings');
if (o && s) {
o.onmouseover = function() {
s.style.borderLeft = Ƈpx solid #88B216'
}
o.onmouseout = function() {
s.removeAttribute('style');
}
s.onmouseover = function() {
s.className = 'settingsactive'
s.style.borderLeft = 'none'
}
s.onmouseout = function() {
s.removeAttribute('className');
} }}
What can I do?
At work I have written a form builder which is all drag and drop.
The issue I have is with ending the drop, I have no problems in IE. The drag is controlled by the onmousemove and onmouseup events for the document body.
The trouble is, in Firefox, if the cursor is over a form item, then the onmouseup event doesn't fire and therefore the drag doesn't end.
There is no problem with other items, other HTML items, tables, list, divs, then all bubble the event to the body.
Anyone ever come across this, if so how did you get round it.
Do I need to manually make form elements bubble in Firefox? Maybe I should just stick a div opacity 0 over the drag objects and make that call the body's onmouseup event.
The objective is to create a stacked, inline vertical menu. Upon mousing over a menu option, a series of sublinks (children) presents itself immediately beneath the parent. The children push the rest of the menu options downward. We're ok up to this point.
Should the mouse pointer point to another menu option, the children of the former menu option pointed at disappear and the new children are displayed. We're still ok. Here's the code I use to accomplish this: Code:
Is there any way to capture the action Ctrl+N (whether it in a hidden
button or keyword - doesn't matter) in html, javascript or php?
I'm trying to make my WYSIWYG editor cross-bowser compatible. To do this I'm contemplating a way to capture keystrokes, but have no clue to go about it.
For example:
If the user presses enter, I want to capture the keystroke and return a <br> tag or if the user presses ctrl + B, I want it to return a <strong> tag.
I'm sure you all have seen how using the src argument in a script tag
is essentially the same as including the body of the script within
your page. For example:
<script type="text/javascript"
src="http://somepage.com/somead/show_ads.js">
</script>
Is there a way to capture the html output of that script and save it
to a variable or text file so that I can use a language like php to
parse it and look for certain words or phrases?
For instance, this particular url executes some javascript code which
produces an iframe on my page, but view source only displays the
script tag. Using innerHTML I can get the iframe code to print in
another browser window, but I would prefer the iframe html be save to
a variable or text file so that I can write a script to parse it on
the fly.
my company has a bunch of web pages on which they want to record every DOM event(mouse movement, clicks etc), these pages were written in past and now with minimal editing I need to add listener to capture these events. way to do this (may be addition of eventlistener at Body tag to capture all bubbled up events, but i am not sure if it will work when stopPropagation method is called by some eventlistener in the chain). I am looking for a universal listener kind of thing that can be easily integrated with my pages.
View 1 Replies View RelatedI am new to this forum and also not a javascript coder. That said, I have a webpage that uses a freeware compiled javascript that displays the number of users current on line.
It works fine. But I would like to capture the output value as a variable that could then be used later. The code below displays the current number of users.
Code:
<script language="JavaScript" src="/cgi-bin/online/online.cgi?output=javascript"></script>