473,719 Members | 2,803 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

mouse events on div element in IE 6

If a div is positioned block or relative, events fire over the entire area
of the div. If the div is positioned absolute they don't--they only fire
over the div's text or image child elements, if any. This isn't true in FF
or Opera, nor was it true in IE 5. If there is any logic in this behavior,
please edify. It seems a bug to me.

nf
Jul 23 '05 #1
4 3011
A granular event catching method must assign id or at least name

to each nested element's methods and properties.

----------------------

There is no indication that you even command THAT
in any ONE browser.


===============

Basically, what you ask is not possible.
And continue to use FF to associate any readers to FireFox,
and you will be your OWN Association Maker hence
be fishing without a bait in the dark of a dead water interest globally.


"nutso fasst" <no********@no. where> wrote in message
news:gK******** *********@newss vr14.news.prodi gy.com...
If a div is positioned block or relative, events fire over the entire area
of the div. If the div is positioned absolute they don't--they only fire
over the div's text or image child elements, if any. This isn't true in FF
or Opera, nor was it true in IE 5. If there is any logic in this behavior,
please edify. It seems a bug to me.

nf


Jul 23 '05 #2
nutso fasst wrote:
If a div is positioned block or relative, events fire over the entire area
of the div. If the div is positioned absolute they don't--they only fire
over the div's text or image child elements, if any. This isn't true in FF
or Opera, nor was it true in IE 5. If there is any logic in this behavior,
please edify. It seems a bug to me.

nf


I think what you are asking is more a CSS question than JavaScript,
so if you want a better answer try:

comp.infosystem s.www.authoring.stylesheets

To see your DIV's dimensions, give it a border and (pale) background.

My take is that by default, DIV's take up the entire page width, but
are only as high as needed for their content. When you give them
position: absolute without any height or width, they will
shrink to fit the content both in width and height.

If you make them smaller than the content using width & height, and
allow the content to overlap the edges, clicking outside the DIV but
over the overlapping internal elements will still cause the div
onclick to fire because the event will bubble up the DOM unless you
stop it.

Events from overlapping elements that are not below the DIV in the
DOM will not bubble up into the div (z-index can influence which of
the overlapping elements gets the click in the first place).

The best idea is to create some simple divs, put onclicks on them,
move them around on the page and within the DOM and see what happens.

The sometimes conflicting view of the DOM structure versus the
position of displayed elements can be confusing - or am I making it
worse?
--
Rob
Jul 23 '05 #3
nutso fasst wrote:
If a div is positioned block or relative, events fire over the entire area of the div. If the div is positioned absolute they don't--they only fire over the div's text or image child elements, if any. This isn't true in FF or Opera, nor was it true in IE 5. If there is any logic in this behavior, please edify. It seems a bug to me.

nf


Hey...dude -

Stop fishing without a bait in the dark of a dead water interest
globally.

If you know what I mean.

IE6 is chock-full of interesting 'features' like this one; many seem
related to oddities in the CSS rendering of positional attributes. Try
this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">

#rel {
position: relative;
width: 300px;
height: 100px;
padding: 4px;
margin: 4px;
border: 1px #000 solid;
}
#abs1 {
position: absolute;
left: 150px;
top: 160px;
width: 300px;
height: 100px;
padding: 4px;
margin: 4px;
border: 1px #000 solid;
}
#abs2 {
position: absolute;
left: 400px;
top: 300px;
width: 300px;
height: 100px;
padding: 4px;
margin: 4px;
border: 1px #000 solid;
}

</style>
<script type="text/javascript">

if (window.createP opup
&& document.compat Mode
&& document.compat Mode == 'CSS1Compat')
{
document.onread ystatechange = function()
{
if (document.body)
document.body.s tyle.height = document.docume ntElement.scrol lHeight
+ 'px';
}
}

</script>
</head>
<body>
<div id="rel" onclick="alert( event.srcElemen t.innerHTML)">r elative
[click]</div>
<div id="abs1" onclick="alert( event.srcElemen t.innerHTML)">a bsolute 1
[click]</div>
<div id="abs2" onclick="alert( event.srcElemen t.innerHTML)">a bsolute 2
[click]</div>
</body>
</html>

Adapted from here, addressing a (seemingly) different issue:

http://blog.tom.me.uk/2003/07/23/boie6selecta.php

Jul 23 '05 #4
Thanks for the replies, but this was only an observation, and--sorry to
say--an insufficiently-tested one at that. I now see that the situation only
occurs when the div with mouse event is overlapping another div containing
an image. It's easily overcome by filling the div with a clear GIF. In the
example below, with IE6, mouseover only fires when the cursor is over the
text. if #clickover contains a same-size clear GIF then it works as
expected.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>none</title>
<style type="text/css">
body {
margin: 4%;
}
div {
margin: 0; padding: 0;
}
#container {
position: relative;
width: 100%; height: 0;
z-index: 0;
cursor: pointer;
}
#inner {
position: absolute;
background-color: gray;
top: 0; left: 0; width: 100%; height: 322px;
}
#inner img {
width: 100%; height: 322px;
}
#clickover {
position: relative;
width: 100%; height: 322px;
z-index: 10;
}
span {
background-color: white;
color: black;
}
</style>

<script type="text/javascript">
var cdiv = 0;
var idiv = 0;

function m_over(e) {
cdiv.style.zInd ex = '20';
}
function m_out(e) {
cdiv.style.zInd ex = '0';
}
function init() {
cdiv=document.g etElementById(' container');
idiv=document.g etElementById(' inner');
document.getEle mentById('click over').onmouseo ver = m_over;
idiv.onmouseout = m_out;
}
</script>

</head>

<body onload="init()" >
<div id="container"> <div id="inner"><im g src="images/test.jpg"
alt=""></div></div>
<div id="clickover"> <span>&nbsp;thi s text should be hidden when cursor is
over the image&nbsp;</span></div>
</body>
</html>

Jul 23 '05 #5

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

5
6225
by: John Champaign | last post by:
Hi all, I'm working on an educational applet for a child with special needs. He's got a bit of a trick to make my life more difficult... To interact with the applet he needs to click on buttons, which is fine most of the time (he comes from a Mac environment, so I accept mouse clicks from the right or left button when he's working on the PC). But every once in a while, he'll press and hold the right mouse button, move onto a JButton,...
3
17308
by: Csaba2000 | last post by:
I have set onmousedown to change the cursor, but this setting is ignored (IE 5.5; NN 6.1 on Win 2K Pro) until the mouse is either moved or the mouse button is released. On Opera 7.01, the setting seems to be ignored completely, even when I try with window.setTimeout. So my two questions are: (1) Most important: Is there anything I can do so that I don't have to wait for the next mouse event before the cursor gets repainted. (2) Why...
1
9770
by: Jean-Gael GRICOURT | last post by:
I am trying to capture mouse events when entering and leaving a DIV layer. This test code works fine with IE 6.0 and Opera 7.21 but fails with Mozilla/Netscape. The strange thing is that the mouse events respond continuously whenever the mouse is moving inside the DIV area. Does anybody have a clue about what is happenning ? J2G
4
3662
by: masantha wee | last post by:
Hi all, I am using Firefox and embedding Javascript in html. I understand that we can use mouse events by coding them in the body of html (by creating a button or anything and by adding in the events in the <img> tag). <input id="StdDev Value" name="StdDevButton" type="button" value="Standard Deviation Value" onclick="readStdDevValue()"/>
5
7967
by: gsb | last post by:
I track the mouse location like this code: function mousePos(e) { var p = new Object(); if(e) { p.x = e.pageX; p.y = e.pageY; } else { p.x = event.x; p.y = event.y; } ... (show) } document.onmousemove=mousePos; Seems to do fine on many browsers.
3
4483
by: Rick Strahl [MVP] | last post by:
I'm working on an app that's using the WebBrowser control. I got the control working fine, hooking to the document object. But I've run into a major issue with hooking the Document events. Whenever I hook any of the HTMLDocumnetEvent2_Event events like this: HTMLDocumentEvents2_Event DocEvents = this.Browser.Document as HTMLDocumentEvents2_Event ; DocEvents.oncontextmenu += new...
2
5028
by: CRPietschmann | last post by:
I'm using the Microsoft Virtual Earth Version 1 Commercial Control. I want to make it so you can click on a pinpoint that's plotted on the map and all mouse events are passed to the map so that the user can click anywhere on the map (including the pin points) and drag/zoom the map around. For those of you who haven't used Virtual Earth: Basically, there are a bunch on absolutely positioned Div elements. I basically want to pass all...
6
9725
by: marss | last post by:
Hi, How can I define in Firefox whether the left mouse button is pressed when I move mouse over a html element? The documentation says that "e.button == 0 for standard 'click', usually left button" http://developer.mozilla.org/en/docs/DOM:event.button Tracing of mouse clicks or mousedown/mouseup events looks not reliable, because mouse can be pressed elsewhere out of the html element (even outside of the browser) and then move over the...
3
2175
by: Beshoo | last post by:
Do u have any idea how can i detect if the mouse on acertain object for exapmle I have <divi wnat if the mouse on this <divtake an action ????
2
3140
by: markszlazak | last post by:
In the following script, a control displays (black box) in each table cell once you mouse over the cell. Mouse down on the control to change the mode of the table. Drag the mouse over cells in the same column then mouseup anywhere in a cell. The mouseup event sometimres fires before the selection of table cells by dragging is complete. It's important that I stop these "false" mouseup's from firing or distinguish them from when I let go of...
0
8833
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...
0
9365
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
0
9210
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
0
9055
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
0
7998
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...
0
5972
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...
0
4482
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
2
2567
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
3
2125
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.