Cross Browser Event Handling
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
ADVERTISEMENT
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
Apr 23, 2011
The topic of event handler management has been covered in many places in the past. One location is in the contest by PPK (http:[url]....). The winning submission by John Resig (http:[url]...._and_the_winner_1.html) has a few problems, and the commentary on the site seems to gravitate to the implementation by Dean Edwards (http://dean.edwards.name/weblog/2005/10/add-event2/) after the analysis of the Resig code.I was also able to find a few more implementations on stackoverflow from: Bill Ayakatubby (http:[url]....) and Marco Demaio [url].....
Outside of the JavaScript frameworks, what is generally done for supporting event functionality? There are numerous options each with their own benefits and drawbacks. I'm uncertain of which one to use myself. Is there an undeclared de facto?
View 4 Replies
View Related
Jan 24, 2009
Is this
Code JavaScript:
function x(event){
if(typeof event == "undefined"){[code]......
View 2 Replies
View Related
Mar 23, 2010
When you click on the "details" link, a modal window pops up with the job info.This works in IE, but nowhere else. My js skills are shaky, at best, but I did figure out that event.srcElement is IE only and that there are better, modern methods of achieving this.Problem is, I don't know how to implement them in this instance.How can I rewrite this so the modal window functions correctly in IE, FF, etc?Here's the code:
Code:
function displayDetails(num,ctrl)
{
for(var i=0; i<details.length; i++)[code]...
View 5 Replies
View Related
Oct 8, 2005
I'm trying to write a cross-browser (IE and firefox) event handler for
the mousewheel. Basically my web app is an image viewer, so if you
scroll "down" with the wheel the next image should be displayed and if
you scroll "up" the previous image should be displayed.
So far I have:
function handleMouseWheel(e)
{
if (!e) e = window.event;
if ( e.wheelDelta <= 0 || e.detail > 0) { changeImage(1); }
else { changeImage(-1); }
}
This code works in IE and in Firefox to the desired effect. The
problem I am having is with registering the event handler.
The following works for IE:
document.onmousewheel = handleMouseWheel;
And the following works for Firefox:
window.addEventListener("DOMMouseScroll", handleMouseWheel, false);
But when I add the firefox event handler to my code, IE chokes with an
error "Object doesn't support this property or method".
What do I need to do to "hide" the firefox event handler code from IE?
View 1 Replies
View Related
Apr 6, 2011
I am trying to develop a Qwerty Shifter http:[url]....by handling keyboard events.I want to display a textbox and as user type any text it changes at once means as user types "a" it display "s" "b" changes "n"
for internet explorer I have script
function InputEventKeyPress(event){
window.event.keyCode = shifter (window.event.keyCode);[code].....
View 11 Replies
View Related
Jun 18, 2009
Is there any way to resize an iframe dynamically to the height of its content that works cross browser and works when the iframe content is on another domain than the main page (I have access to both pages, so code can be put in either) Also, it must resize when links in the iframe are clicked (ie when a new page within the iframe is loaded)
View 1 Replies
View Related
May 13, 2009
I am having a problem with a script that I am writing and I believe it is centered within a piece of jQuery code. I have some code like this (simplified slightly):
$.get('news/testfeed.xml', function(data) {
$('record', data).each(function() {
var $link = $('<a></a>')
.attr('href', $('link', this).text())
[Code].....
View 1 Replies
View Related
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
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
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
Aug 6, 2006
I want to find x, y location of a layer or an image, or any other item
on a webpage.
1. It could be relatively or absolutely positioned.
2. It does not matter what browser the user is using.
what's the correct javascript code?
example: find x, y location of the image "someImage"
<html>
<body>
......... some html here....
<img src="someImage.gif" id="someImage" />
......... some html here....
<body>
</html>
View 2 Replies
View Related
Jul 5, 2003
After 1.5 years of writting my website I installed NS. It's JS works alot different to IE's, so it looks like I've got to write most of my site again!! [img]images/smilies/frown.gif[/img]
NS will only read 1 external JS file, which is abit of a nuisance as my site has a JS file common to site, another for the subfolders of the site, and the page's JS included with the HTML.
I'm trying to put all of common functions into one JS, but some of the functions have large amounts of text assigned to them. I'm trying to import the text using XML sheets as needed, but having a bit of a problem with the line
Code:
xmlDoc.childNodes[i].childNodes[2]
where NS will only read 1 array of childNodes. How do extract xml with NS's JS?
View 5 Replies
View Related
Aug 27, 2002
If my audience uses not so old browsers, do I have to use cross browser DOM? If they have IE 5 or later and Netscape 6 or Mozilla 1.0 or later and any version of Opera that is not older than 6 months?
View 2 Replies
View Related
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
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
