Event Handling And Nested Div
Jan 20, 2008
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!
View 2 Replies
ADVERTISEMENT
Nov 17, 2011
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
View 1 Replies
View Related
Jan 11, 2009
why I should use the dom level 2 event handling over inline events like ...
Code HTML4Strict:
<a href="http://www.yahoo.com" onClick="myFunction()">click me</a>
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:
Code HTML4Strict:
<a href="http://www.yahoo.com" onClick="myFunctionA();myFunctionB();myFunctionC()">click me</a>
or I can call my functions from a single function call like
Code HTML4Strict: <a href="http://www.yahoo.com" onClick="myMultiFunctionCall()">click me</a>
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].......
View 5 Replies
View Related
Nov 17, 2011
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
HTML Code:
<ul>
<li>
Root[code]............
View 2 Replies
View Related
Apr 14, 2011
I have a question about event handling in javascript.Let's say I have 3 divs, directly in the body of an html document.
<html>
<body>
<div id="div1black"></div>[code].......
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).
View 2 Replies
View Related
Feb 28, 2007
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
View 2 Replies
View Related
Jan 24, 2009
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.
View 1 Replies
View Related
Oct 18, 2006
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.
What are my alternatives?
View 2 Replies
View Related
Jul 20, 2005
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?
View 1 Replies
View Related
Jan 8, 2010
i'm trying to do some event delegation, and i can't seem to get the onchange event working in IE. i've tried:
$(document).change(function () { alert('fuck. me. IE sux'); }); $(document.body).change(function () { alert('fuck. me. again'); });
and later i have:
<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)?
View 5 Replies
View Related
Aug 21, 2009
Suppose I have this syntax:
I want tellme() to handle the value of href of the clicked link.
What syntax do I put in tellme()?
I got this far:
Here is question: How would I get this info from the API documentation?
View 7 Replies
View Related
Aug 4, 2009
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", .....
View 5 Replies
View Related
Nov 13, 2007
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?
View 7 Replies
View Related
Apr 14, 2011
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.
View 1 Replies
View Related
Jun 9, 2009
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
View 2 Replies
View Related
Jul 18, 2010
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?
Code:
(function(){
try{[code]....
View 2 Replies
View Related
Mar 23, 2011
Am new to javascript and am having this problem;
//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,
View 4 Replies
View Related
Dec 14, 2011
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.
View 1 Replies
View Related
Nov 11, 2011
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.
View 3 Replies
View Related
Jul 10, 2010
I have the following javascript for an 'accordian' style html widget.
Code:
var accordionItems = new Array();
function init(id) {
// Grab the accordion items from the page
[Code].....
I have nested checkboxes within each <h2> but I need them to behave independently of the onclick event that is set to the <h2> in the javascript.
In other words, when I select a checkbox, I don't want the onlick event to trigger.
View 1 Replies
View Related
Mar 1, 2011
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?
View 1 Replies
View Related
Oct 23, 2009
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..
View 7 Replies
View Related
Jul 23, 2005
I'm looking for tutorials or articles considering HTML Frames and how to
handle them with Javascript.
E.g. samples how Frames can exchange information, can a Frame instruct
other Frame to update it's content etc.
View 5 Replies
View Related
Oct 25, 2005
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?
View 8 Replies
View Related
Feb 16, 2006
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.
View 2 Replies
View Related
Jul 20, 2005
I have a piece of simple code which take the user inputs and depending which check box is selected directs them to a different page.
<form name="allform">
<input type="radio" name="allsearch" value="Weaksearch">
<font face="Arial,Helvetica" >Weak </font><br>
<input type="radio" name="allsearch" value="Pinsersearch">
<font face="Arial,Helvetica" >Pinser </font><br>
<input type="radio" name="allsearch" value="Brutesearch">
<font face="Arial,Helvetica">Brute note </font> <br>
<input type="radio" name="allsearch" checked
value="gogsearch">
<font face="Arial,Helvetica">Google</font> <br>
<input type=text name=allsearchtext size=10 maxlength=255>
<input type="button" onClick="locateall(this)" value="Go"
name="button">
</form>
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?
View 3 Replies
View Related
