By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
435,154 Members | 1,031 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 435,154 IT Pros & Developers. It's quick & easy.

how do you prevent the onclick action from being fired in IE

P: 14
How do I in IE prevent the onclick action from being fired when I am done dragging?
have tried "window.event.cancelBubble = true", for onmouseup , onmousedown, and onmousemove handlers. The onclick sort action always seems to get fired. Any help would be greatly appeciated.
The following demo is sortable and resizable. I basically don't want the onclick action to be fired if I am resizing a column.

Steve


[HTML]<HTML>
<HEAD>
<style>
h1, h2{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:13px;

}
.move
{
width:100%;
background-color:#99CCFF;
border-bottom:1px solid blue;
font-size:14px;
font-family:vardana;
font-color:"#33CCAA";
text-align:center;
}

.info
{
width:100%;
background-color:#99CCFF;
border-top:1px solid blue;
font-size:13px;
font-family:vardana;
font-color:"#33CCAA";
}

.panel2{
width:150; position:absolute; border:1px solid blue; left:500; top:200; font-size:13px; font-family:vardana;}

.panel{
width:150; position:absolute; border:1px solid blue; left:350; top:200; font-size:13px; font-family:vardana;}
.panel a:visited{color:blue;}

.panel a{text-decoration:none;color:blue}

.panel a:hover{text-decoration:none;}



#panel a.visited{

text-decoration:none;

}

.menu

{

width:100%;

background-color:lightyellow;

font-size:13px;

font-family:vardana;

}

</style>

<!--[if IE]>
<style type="text/css">
div.scrollable {
/* shrink the window, adjust for the 2 border pixels */
height:expression( this.getElementsByTagName('TABLE')[0].clientHeight >= 80 ? "80px": "auto" );
overflow-x: visible;
overflow-y: auto;
}

div.scrollable table {
/* adjust for the 17 pixels for the scrollbar */
width: expression(this.parentNode.offsetWidth-17);
}

/* set the table row */
div.scrollable table thead tr {
position: relative;
/* this fixes IE header jumping bug */
top: expression( this.parentNode.parentNode.parentNode.scrollTop + 'px' );
}
</style>
<![endif]-->

<!-- if mozilla -->
<style type="text/css">
html>body div.TableContainer table tbody {
height: 20px;
overflow: auto;
}

/* add 17 for the scrollbar */
html>body div.TableContainer div.scrollbarCol {
width:17px;
}
</style>

<script type="text/javascript" src="http://www.kryogenix.org/code/browser/sorttable/sorttable.js" >
</script>

<SCRIPT LANGUAGE="JavaScript">

N = (document.all) ? 0 : 1;
var ob;
var over = false;
var over_id ="";
var iEdgeThreshold = 10;

function TableResize_findPos(obj) {
var curleft = curtop = 0;
if (obj.offsetParent) {
curleft = obj.offsetLeft;
curtop = obj.offsetTop;
while (obj = obj.offsetParent) {
curleft += obj.offsetLeft;
curtop += obj.offsetTop;
}
}
return [curleft,curtop];
}

/* Function that tells me if on the border or not */
function TableResize_isOnBorderLeft( objTable, objTh,event){
var left = objTh.offsetLeft;
var pos = TableResize_findPos(objTable);
var absLeft = pos[0] + left;

if( event.clientX < (absLeft + iEdgeThreshold) ){
return 1;
}
return 0;
}

function TableResize_isOnBorderRight( objTable, objTh,event){
var width = objTh.offsetWidth;
var left = objTh.offsetLeft;
var pos = TableResize_findPos(objTable);
var absRight = pos[0] + left + width;

if( event.clientX > (absRight - iEdgeThreshold) ){
return 1;
}
return 0;
}

function TableResize_getNodeName(objReference,nodeName)
{
var oElement = objReference;
while (oElement != null && oElement.tagName != null && oElement.tagName != "BODY") {
if (oElement.tagName.toUpperCase() == nodeName) {
return oElement;
}
oElement = oElement.parentNode;
}
return null;
}


function do_resize(objTh,event){
if(event == null){
event = window.event;
}
var objTable = TableResize_getNodeName(objTh, "TABLE");
if( TableResize_isOnBorderLeft( objTable, objTh,event) ){
objTh.style.cursor="e-resize";
return true;
}
else if( TableResize_isOnBorderRight( objTable, objTh,event) ){
objTh.style.cursor="e-resize";
return true;
}

objTh.style.cursor="";
return false;
}

function MD(e) {
MOUSTSTART_X=event.clientX;
MOUSTSTART_Y=event.clientY;
if (over){
if (N) {
ob = document.getElementById(over_id);
X=e.layerX;
Y=e.layerY;
return false;
}

else{

ob = document.getElementById(over_id);
ob2 = document.getElementById("MAINTABLE");
obwidth=parseInt(ob.style.width);
obwidth2=parseInt(ob2.style.width);
X=event.offsetX;
Y=event.offsetY;

}

}
}


function MM(e) {

if (ob) {
if (N) {
ob.style.top = e.pageY-Y;
ob.style.left = e.pageX-X;
}
else{
st=event.clientX-MOUSTSTART_X+obwidth;
st2=event.clientX-MOUSTSTART_X+obwidth2;

if(st>=30){
ob.style.width=st;
ob2.style.width=st2;
document.getElementById("status").innerHTML=st;
}
document.selection.empty();
}
}
}

function MU(e) {

if(ob != null){
document.selection.empty();
ob = null;
}
}

if (N) {
document.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE | Event.MOUSEUP);
}

document.onmousedown = MD;
document.onmousemove = MM;
document.onmouseup = MU;
</script>


</HEAD>

<BODY>
<!--
YOU MUST HAVE TO DEFINE WIDTH ON STYLE TAB.. if you leave NULL
IT RETURNS .. ERROR..
-->
<H1>RESIZABLE TABLE COLUMN</H1>

<table style="border: 1px gray solid">
<tr>
<td>
<div class="scrollable">

<TABLE border="1" STYLE="width:500px; overflow:hidden; table-layout:fixed" ID="MAINTABLE" class="sortable">

<THEAD>

<TR>

<TH id="panel0" class='move' onmousemove="over=do_resize(this);over_id='panel0' " onmouseover="over=do_resize(this);over_id='panel0' " onmouseout='over=false;' style='width:100px; overflow:hidden'>CO0</TH>

<TH id="panel1" class='move' onmousemove="over=do_resize(this);over_id='panel1' " onmouseover="over=do_resize(this);over_id='panel1' " onmouseout='over=false;' style='width:100px; overflow:hidden'>CO1</TH>

<TH id="panel2" class='move' onmousemove="over=do_resize(this);over_id='panel2' " onmouseover="over=do_resize(this);over_id='panel2' " onmouseout='over=false;' style='width:100px; overflow:hidden'>CO2</TH>

<TH id="panel3" class='move' onmousemove="over=do_resize(this);over_id='panel3' " onmouseover="over=do_resize(this);over_id='panel3' " onmouseout='over=false;' style='width:100px; overflow:hidden'>CO3</TH>

<TH id="panel4" class='move' onmousemove="over=do_resize(this);over_id='panel4' " onmouseover="over=do_resize(this);over_id='panel4' " onmouseout='over=false;' style='width:100px; overflow:hidden'>CO4</TH>

</TR>
</THEAD>
<TBODY>
<TR>

<TD>1_0</TD>


<TD><input type="text" value="this is a very long text string" style="width:100%" ></TD>


<TD>1_2</TD>


<TD>1_3</TD>


<TD>1_4</TD>


</TR>


<TR>

<TD>2_0</TD>


<TD>2_1</TD>


<TD>2_2</TD>


<TD>2_3</TD>


<TD>2_4</TD>


</TR>


<TR>

<TD>3_0</TD>


<TD>3_1</TD>


<TD>3_2</TD>


<TD>3_3</TD>


<TD>3_4</TD>


</TR>


<TR>

<TD>4_0</TD>


<TD>4_1</TD>


<TD>4_2</TD>

<TD>4_3</TD>
<TD>4_4</TD>

</TR>
</TBODY>
</table>

</div>
</td>
</tr>
</table>
<div id="status"></div>
</HTML>[/HTML]
Nov 12 '07 #1
Share this Question
Share on Google+
4 Replies


gits
Expert Mod 5K+
P: 5,333
hi ...

please don't post your email address here ... i removed it from the post for your own protection ...

kind regards
Nov 12 '07 #2

Dasty
Expert 100+
P: 101
I briefly looked at your code. You can not tell browser to not fire events if you already attached event handlers for some of your elements / document. If you don't want to process them you got 2 choices:

1) deatttach (temporary or permantly) event handlers from objects you dont want to be processed
2) make some kind of "state" variables where you'll keep some kind of status and adjust code in handlers to act based on conditions stored in those variables. For example in your solution you'll create global variable "var i_just_moved_col = false" and adjust onclick handler to reflect it.

Stopping bubbling / prospecting will just tell the browser to not continue firing same event on higher / lower elements in structure.

Sorry I dont have time to give you exact solution, because it requires to dig http://www.kryogenix.org javascript file too (because exactly code in that include file is adding onclick handler on header cells)

Hope that helps
Nov 12 '07 #3

P: 14
Dasty,
Thx for your replay. That was extremely helpful. I did notice that an alert statement caused the onclick event handler to be fired. Is it possible to fool change the location of the mouse pointer to a different location, e.g. onmouseup move to a location.

Steve
Nov 12 '07 #4

P: 14
Dasty,
Typo
Thx for your replay. That was extremely helpful. I did notice that an alert statement caused the onclick event handler to be fired. Is it possible to fool change the location of the mouse pointer to a different location, e.g. onmouseup move to a location.

Steve
Thx for your replay. That was extremely helpful. I did notice that an alert statement caused the onclick event handler NOT to be fired. Is it possible to fool or change the location of the mouse pointer, e.g. onmouseup move to a location outside the resizing cell.
Nov 12 '07 #5

Post your reply

Sign in to post your reply or Sign up for a free account.