I have two div elements (both dynamically created, one within the other). The parent div has an event attached to it:
contextmenuDIV.onmouseout = function () {doSomething()}
for example. However the onmouseout event will fire when you mouseover the child div as (of course) I am technically leaving the div layer (despite it being the parent).
Is there anyway to cancel this? I've read all about bubbling and all that, but it's just confusing me even more!
Anyway, at all, to allow me to have divs within another div element but only allow the event to fire for the parent!
I have a nested lists. I'm using hover event to trigger an event. But when I hover child nodes, the event of theancestor list is being fired. How can I get rid of this situation
I work in a team of developers and our pages are dynamically created using Java.I can at any moment change the inline JS across a site due to this so changes are easier then if the site was just static HTML.As far as reasons to use dom 2 over inline, I looking for something beyond:
it separates behavior from html
it is a best practice
it is the 'modern' way of doing it
I need facts that explain why it is a best practice or why 'modern' is better like : you can only assign one function action to the event.That was just an example which I see but is not true to me.I can either assign multiple functions to it like:
and then have a function defined before the inline call like
Code JavaScript: function myMultiFunctionCall() {[code].....
Here the second statement overwrites the first.By the way, here is a con for using dom and to me a big one considering debugging: you can't see what event handlers are assigned to what unlike inline where it is obvious because it is in the page. see http:[url].......
I am having a list (ul) in which a mouse over will populate its sub categories as list under that(like tree) and so on. My problem is, when passes mouse over a 2nd or 3rd level element, 2 mouse over events will be fired (The actual one and its parent) The sample code is given below
Each of those div's is positioned differently using css, as displayed in the image below: Each div has an event listener for the click event.In the image above I marked a point. If the user would click on that point, are all 3 event listeners supposed to fire? As I understood it, there's a capture and a bubbling phase, but these only go down through and up from the ancestors of the target right? And none of the div's are ancestors of eachother, they just happened to overlap because of the css position.
How would I let all registered eventsHandlers be fired whenever a user clicks on overlapping HTML elements? (so the eventHandlers for each of the 3 div's should be fired).
I have a document with a parent element that has mousedown,mouseup and mousemove events registered to it. The parent element has some child elements as well. I observe inconsistent behaviours between browser types when I hold the mouse button down, move the pointer and release the button.
ie7 - mouseup fires when over a child or parent
op9 - mouseup fires only when over the parent
ff2 - mouseup fires only over a child or parent but only if the pointer has moved since the mousedown occured
Because much of the talented JS community doesn't frequent the 'looking to hire' marketplace boards, I wanted to link to my post looking for help in understanding fully a group of functions I would like to use. While much of this I understand, along with some of the OOP principles used, there are some hang-ups I'm running into. Therefore, I'm looking for someone to walk me through the functions and help me understand the logic behind it. And since time is money, especially for those who are more skilled, I would rather respect this and pay for the conversation.
Further, if the person who takes up the task doesn't object, I will document the functions use for the community to benefit, since these are public boards. Of course, giving full credit to the original writers and the person who helped me understand.
I have a question regarding how to prevent memory leaks in Internet Explorer when using closures. I already knew about the circular reference problem, and until now was able to prevent memory leak problems. But I needed to store DOM elements and can't solve it anymore. So I search the group archive to see if I missed any valuable information. I found some interesting articles, but somehow could not apply it to my problem or I did not understand it fully. In particular the articles that talked about setting variables to NULL seemed as an easy solution, but I think I didn't understand it, because it didn't seem to work.
So, let me explain my problem in more detail. I am working on some very dynamic and complex page. It uses AJAX (XMLHttpRequest) to alter different parts of the page. This already disqualifies the finalize method solution to cleanup memory leak problems. I use several "component classes" to do the work of creating DOM elements in some container element and provide an easy to use interface for manipulation the content. For example I can call component.setBackgroundColor("red") and the component takes care of changing the style on the correct DOM element that is encapsulated in the component. In reality the component uses more complex interface method, but I hope you get the picture of why I do this.
Let me show you some example code:
function MyComponent() { var div; var handler = null;
this.generate = function generate() { div = document.createElement("div"); div.onclick = MyComponent.createClickHandler(this); // normally more elements are created here return div; }
this.setBackgroundColor = function setBackgroundColor(value) { div.style.backgroundColor = value; }
this.getHandler = function getHandler() { return handler; }
this.setHandler = function setHandler(value) { handler = value; }
}
MyComponent.createClickHandler = function createClickHandler(component) { return function(event) { var handler = component.getHandler(); if (handler != null) handler(event); } }
This "component class" can be used like this:
var container = document.getElementById("container"); var component = new MyComponent(); container.appendChild(component.generate()); .... component.setBackgroundColor("red"); component.setHandler(function(event) {alert("Stop touching me!")});
The problem, of course, is that this code will create a memory leak in Internet Explorer. I need the component in the event handler to get the handler dynamically, but the div is stored there too, creating a circular reference.
One of the things I tried doing is making a DOMStorage "class" like this:
function DOMStorage() { var map = new Object();
this.get = function get(id) { return map[id]; }
this.put = function put(id, obj) { map[id] = obj; }
}
var storage = new DOMStorage(); //global
Instead of storing the div element directly in the component, I store it under an id in the DOMStorage and use it to retrieve it later. This actually prevented the memory leak. I don't really understand why, because I still see a circular reference. Maybe Internet Explorer does not count references in the global scope as a circular reference? When I move the global storage to inside the container object I get the memory leak again.
Unfortunately I am unable to use a global DOMStorage, because the "component class" in instantiated many times, and they must all have their seperate DOM elements.
Perhaps I have to generate unique ID's when I put a DOM element into the global storage? It seems so over-the-top for something that works perfectly fine in Firefox.
I create two iframes dynamically to get data from the server. I want to deal with the data after it's downloaded, so I set the two iframes' onload event handlers to current document(not the iframe self), the handlers' JS code is generated dynamically too.
But I found only the second event is triggered and I can't get the first iframe's onload event.
Why? The data in the first iframe is really arrived, but it doesn't trigger the onload event.
Is there any other better way to conceal download data from server, not refresh current document?
<select id="aSelect"> <option value="0">a first option</option> <option value="1">a second option</option> <option value="2">a third option</option> <option value="3">a fourth option</option> </select>
but this doesn't work in IE. i've also tried to wire these up manually: document.body.onchange = function (e) { alert('foo); }; and document.onchange, but those don't work either. what's the story here (other than the fact that IE is sucking balls)?
I'm working on a small plugin that extends a checkbox to behave as if it has 3 states. Basically it just adds an anchor above the underlying checkbox, intercepts mouse clicks, and cycles the checkbox between: disabled + unchecked enabled + unchecked enabled + checked
It works fine in FF. But in IE7, for some reason, the click events are always sent to the underlying checkbox instead of the overlaid anchor. The anchor is sized to completely overlay the checkbox (and in fact, I made it's slightly bigger so clicking at the very edges works). Incidentally, I'm using jQuery 1.2.6 since this is part of a much larger web application and we haven't yet worked out the incompatibilities we're seeing with the latest jQuery version.
Here's the plugin code (the alerts are for debugging in IE) (function($) { $.fn.checkbox3s = function(options) { var opts = $.extend({}, $.fn.defaults, options); return this.each(function() { var proxy, cbx = $(this), parent = cbx.parent(); parent.css({position:"relative"}); proxy = $("<a href='#'></a>").css({ position:"absolute", .....
I understand that when loading a page, the html parser is suspended until any script that it comes across is executed. i also believe that certain browsers will allow user input for those parts rendered whilst the rest of the page is still being parsed. suppose that a user clicks a button that is visible and 'active' and fires off some lengthy javascript execution causing the ui to 'freeze' for a while. my question is, on a page that is still being parsed but allows user input on those parts parsed and rendered, will the parsing of the rest of the page cease whilst the event handler (onclick) is working or will the user see the page render simultaneously as the event handler does its job?
I need to call a function when user copy and paste the text value in the text box. I tried using "mousedown" event. But "mousedown" event handles left and right clicks when user clicks on the paste link on right click unable to handle the event. I am using jquery 1.5.
I am currently following the image popup example from:[URL]If I run the demo on Windows XP on Chrome or Safari, the escape keydoesn't close the popup window. How do I handle this in jQuery for
I'm trying to augment Object.prototype with an addEvent method that will add event listeners, and will work regardless of whether the browser is IE or not.Here's what I have: So far it seems to work in non-IE browsers, but in IE8 it doesn't work. Where am I going wrong?
//Some other code //Here I create an input element of type text and assign a onclick event property var quantityTxt = document.createElement("input"); quantityTxt.type = "text"; quantityTxt.onclick = calcAmount();
[Code]...
Now my problem is that the above function gets called even when the cell has not been clicked, hope am clear enough,
When I upgraded to jQuery 1.7.1 (from 1.5.x), I found that an exception was suddenly thrown on every keydown event on an INPUT type="text". I still get the exception when I remove my change and keyup events. Previously I bound to these elements with .live, but I have the same issue with the new .on, so I don't think this problem is even related to my bindings.
The exception is as follows (from the custom WebKit frame where my script runs):
This occurs on line 3255 of jquery-dev-1.7.1.js, which reads:
I did some poking around and found that handleObj.origType is "keydown". There is no jQuery.event.special["keydown"] defined, meaning that the first part of the expression evaluates to undefined (there is no such thing as {}.handle). The second part of the expression, handleObj.handler, evaluates to true. The entire expression therefore evaluates to true, which can't be applied as a function.
I'm trying to load some html content into a page via the ajax .load() method (wrapped within the $(document).ready() function).After I execute this, I'd like to bind all new span elements from the loaded content to a context menu plugin like this:
$("#selector").contextMenu({ menu: ''myMenu'' },
[code]....
Unfortunately since the span elements are coming from the ajax request,I don't think I can bind a normal event handler as per the plugin. [URL] how to use event bubbling in this situation.
I am making a system whereby if an element has a class "editable", you can click it and a popup box appears with some options about that particular element. Fairly straightforward, I'm using [code]...
This works fine but I need to be able to have lots of different divs, all with class "editable", some of which are inside others with class "editable". Like this [code]...
However, clicking on the 'somethingelse' div, triggers the click correctly but also triggers it for the parent 'something' div, so I end up with the popup box appearing twice.
Does anyone know how to just catch a click event on the exact div (without using ids) without triggering the parent?
I have nested markup like this Code HTML4Strict: <li><span></span></li> I have different click functions, one attached to the li and the other to the span.
When I click on the span they both run. Ending the span's event handler with return false; prevented that from happening, which is what I want. But I'm not sure I understand why it worked.. I know, for example, if I was clicking on an anchor, return false would stop the browsers default action of following the href value. Same for submitting a form, return false will stop this. I don't think I understand why this would stop a completely different function from being triggered..
We have some date fields in our HTML forms in various places. In the accounts package we use, there is some pretty nifty date handling.
It has a standardised date format of dd/mm/yyyy and if you enter e.g.
3-12 it will switch it to 3/12/2005
Same applies for e.g. 3:12 etc
Anyone know of some javascript which will do this for our HTML form fields? Our target format is actually dd-mon-yyyy and it would make it really nice for users if the system could accept a variety of input formats and then switch it to a date to our specification. Any suggestions?
I have few textfields and dropdowns in my jsp, form is submitted on clicking an image link.
In case there is an error for instance some text field is left empty, then message is displayed below respective fields ( using spans, inner html). The message is displayed onblur event of the field. So if there was an error then message is displayed, now if the user corrects the error and clicks the link then first the message disaapears ,which is desired ,but he has to click again to submit the form. please suggest a way to handle this. So that user doesn't have to click the link twice to submit the form.I tried having onmousedown and onfocus events on image , but then sometimes the form was submitted twice which gave backend errors.
This works but the user needs to hit the go button, if they just hit return the text field is emptied, I would like if the user hits ENTER, the search begins.
I believe I can add something similar as
if (window.event.keyCode == 13)
But I am not sure how to incorporate it in the form?