禁用TR onclick事件 [英] Disable TR onclick event

查看：79
本文介绍了禁用TR onclick事件的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有以下测试网页： -


< html>

< head>< title>测试< / title>

< script language =" Javascript">

<！ -

function fnTR（）{

alert（" TR"）;

}


function fnSelect（）{

alert（" Select" ）;

}

- >

< / script>

< / head>

< body>

< table width =" 300"高度= QUOT; 50" border =" 1">

< tr onclick =" javascript ：fnTR（）;">

< td align =" center">

< select onclick =" javascript ：fnSelect（）;">

< ;选项>选项1< /选项>

<选项>选项2< /选项>

< / select>

< / td>

< / tr>

< / table>

< / body>

< / html>


当点击我的选择下拉列表时，是否有人知道我如何获得

我的页面只执行fnSelect功能，而不是fnTR

函数还有吗？


在我的真实页面中，我的函数执行其他操作（即fnTR

突出显示所选行），但我刚刚发出警告

演示。


是否可以这样做而无需在所有
而我的TD元素呢？

是否有某种声音d函数或返回false;我可以？或者是

可以在我的fnTR函数中添加一些功能，如果我点击下拉框，检查是否b $ b检查，如果是，则不执行

其余功能？


提前感谢任何建议


Dan。

I have the following test web page:-

<html>
<head><title>Test</title>
<script language="Javascript">
<!--
function fnTR() {
alert("TR");
}

function fnSelect() {
alert("Select");
}
-->
</script>
</head>
<body>
<table width="300" height="50" border="1">
<tr onclick="javascript:fnTR();">
<td align="center">
<select onclick="javascript:fnSelect();">
<option>option 1</option>
<option>option 2</option>
</select>
</td>
</tr>
</table>
</body>
</html>

When clicking on my select dropdownlist, does anyone know how i can get
my page to only execute the fnSelect function, and not the fnTR
function aswell?

In my real page, my functions perform other operations (i.e. fnTR
highlights the selected row), but i''ve just put in alerts to
demonstrate.

Is it possible to do this without having to put onClick events in all
my TD elements instead?
Is there some sort of void function or return false; i could do? Or is
it possible to add some functionality to my fnTR function that would
check if I clicked on the dropdown box, and if so, not to perform the
rest of the function?

Thanks in advance for any suggestions

Dan.

推荐答案


da ** ********@newcross-nursing.com 写道：

da**********@newcross-nursing.com wrote:
当点击我的选择下拉列表时，有谁知道我怎么能得到
我的页面只执行fnSelect函数，而不是fnTR
函数呢？

在我的实际页面中，我的函数执行其他操作（即fnTR
突出显示所选行） ，但我刚刚发出警告来演示。

是否可以这样做，而不必在所有我的TD元素中放置onClick事件？
提前感谢任何建议
When clicking on my select dropdownlist, does anyone know how i can get
my page to only execute the fnSelect function, and not the fnTR
function aswell?

In my real page, my functions perform other operations (i.e. fnTR
highlights the selected row), but i''ve just put in alerts to
demonstrate.

Is it possible to do this without having to put onClick events in all
my TD elements instead?
Is there some sort of void function or return false; i could do? Or is
it possible to add some functionality to my fnTR function that would
check if I clicked on the dropdown box, and if so, not to perform the
rest of the function?

Thanks in advance for any suggestions




嗨丹，


如果有的话会很好有些东西干净就像返回假，

会阻止tr处理程序触发。我不知道是否有。

根据您的上一个想法，我刚刚测试了以下文件


<！DOCTYPE HTML PUBLIC" - // W3C // DTD HTML 4.01 // EN">

< html lang =" en">

< head>

< meta http-equiv =" Content-Type"含量=" text / html的; charset = utf-8">

< title>测试< / title>


< script type =''text / javascript''> ;


var flag = false;


函数fnTR（）{

if（flag）{

flag = false;

} else {

alert（" TR"）;

}

}


函数fnSelect（）{

flag = true;

alert（" Select"）;

}


< / script>


< / head>

< body>


< table width =" 300"高度= QUOT; 50" border =" 1">

< tr onclick =" fnTR（）;">

< td align =" center">

< select onclick =" fnSelect（）;">

< option> option 1< / option>

< ;选项>选项2< /选项>

< / select>

< / td>

< / tr>

< / table>


< / body>

< / html>


（注意不要使用已弃用的语言属性或<！ - - >

隐藏技巧。我不会使用javascript ：而且从来没有。我还添加了一个

doctype。


我确定有很多方法可以做到这一点，但如果你的情况是

相对简单，这可能没问题。


彼得



Hi Dan,

It would be nice if there is some thing clean like a return false that
would stop the tr handler from firing. I don''t know if there is.
Following from your last idea I just tested the following file

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test</title>

<script type=''text/javascript''>

var flag = false;

function fnTR() {
if (flag) {
flag = false;
} else {
alert("TR");
}
}

function fnSelect() {
flag = true;
alert("Select");
}

</script>

</head>
<body>

<table width="300" height="50" border="1">
<tr onclick="fnTR();">
<td align="center">
<select onclick="fnSelect();">
<option>option 1</option>
<option>option 2</option>
</select>
</td>
</tr>
</table>

</body>
</html>

(Note no use of the deprecated language attribute or the <!-- -->
hiding trick. I don''t use "javascript:" and never have. Also I added a
doctype.)

I''m sure there are many ways to do this but if your situation is
relatively simple this might be ok.

Peter


pe ********** @ gmail.com 写道：
da ********** @ newcross-nursing.com 写道：
da**********@newcross-nursing.com wrote:
点击我的选择下拉列表时，有没有人知道我怎么能得到
我的页面只执行fnSelect功能，而不是fnTR
功能呢？
When clicking on my select dropdownlist, does anyone know how i can get
my page to only execute the fnSelect function, and not the fnTR
function aswell?


[...]
如果有一些东西干净就像一个返回错误，
会阻止tr处理程序触发。我不知道是否有。

[...]
It would be nice if there is some thing clean like a return false that
would stop the tr handler from firing. I don''t know if there is.




是的，有 - 您取消事件传播以阻止它冒泡到

对象在DOM树中更高。不幸的是，IE和W3C

实现了不同的事件模型，所以它有点凌乱，但不是很难实现。


如果事件处理程序在HTML中编码，则将事件传递给函数：


< select onclick =" fnSelect（event）;">

现在W3C浏览器将引用一个名为

函数的事件。 IE使它成为window对象的属性，所以在

函数声明中做：


函数fnSelect（e）

{

if（！e）{

var e = window.event;

}

//可以也这样做：var e = e || window.event;


/ *剩下的功能... * /


}

现在'' e''是对在两个
事件模型中调用该函数的事件的引用。为了取消冒泡，IE使用：


window.event.cancelBubble = true;


W3C浏览器使用：

e.stopPropagation（）


所以现在函数看起来像：


函数fnSelect（e）{

var e = e || window.event;

e.cancelBubble = true;

if（e.stopPropagation）e.stopPropagation（）;


/ *其余功能... * /


}


这将取消函数的冒泡，无论哪个元素

调用它，如果你想让它为你可能需要的其他元素冒泡

为你不想要的事件创建一个非冒泡的调用者
$ b泡泡$ b。


了解更多关于quirksmode的事件和事件订单的信息：


< URL：http：//www.quirksmode .org / js / events_order.html>


如果从函数而不是HTML中添加事件处理程序，

事情会有所不同。对事件的引用作为

传递给W3C模型中的函数的第一个参数，但不传递给IE，因此

函数看起来相同，但附件过程看起来一点点

不同。即。附上功能棒：


someEl.onclick = fnSelect;


你不必这样做：


someEl.onclick = function（）{fnSelect（event）;}


或类似的kludge。在W3C模型中，您还可以指定

函数是否使用addEventListener在冒泡或捕获阶段触发 -

它全部覆盖在quirksmode上。
< br $> b $ b [...]

-

Rob



Yes, there is - you cancel event propagation to stop it bubbling up to
objects higher in the DOM tree. Unfortunately IE and the W3C
implemented different event models so it''s a bit messy, but not to
tough.

If event handlers are coded in the HTML, pass ''event'' to the function:

<select onclick="fnSelect(event);">
Now W3C browsers will have a reference to the event that called the
function. IE makes it a property of the window object, so in the
function declaration do:

function fnSelect( e )
{
if ( !e ) {
var e = window.event;
}
// can also do: var e = e || window.event;

/* rest of function... */

}
Now ''e'' is a reference to the event that called the function in both
event models. To cancel bubbling, IE uses:

window.event.cancelBubble = true;

W3C browsers use:

e.stopPropagation()

so now the function looks like:

function fnSelect(e){
var e = e || window.event;
e.cancelBubble = true;
if (e.stopPropagation) e.stopPropagation();

/* rest of function... */

}

That will cancel bubbling for the function regardless of which element
calls it, if you want it to bubble for other elements you may need to
create a non-bubbling caller for elements whose events you don''t want
to bubble.

Read more about events and event order at quirksmode:

<URL:http://www.quirksmode.org/js/events_order.html>

If adding event handlers from a function rather than in the HTML,
things are a little different. A reference to the event is passed as
the first argument to the function in the W3C model but not in IEs, so
the function looks the same but the attachment process looks a little
different. ie. to attach the function stick with:

someEl.onclick = fnSelect;

You don''t have to do:

someEl.onclick = function (){fnSelect(event);}

or similar kludge. In the W3C model you can also specify whether the
function fires in bubbling or capturing phases using addEventListener -
it''s all covered at quirksmode.

[...]

--
Rob

RobG写道：

< snip>
RobG wrote:
<snip>
< select onclick =" fnSelect（event）;">

现在W3C浏览器将引用
调用该函数的事件。 IE使它成为窗口
对象的属性，


所有浏览器都会将对事件对象的引用传递给 -

fnSelect - function作为一个论点。这是由于浏览器从值
生成的事件处理函数的上下文中解析

标识符 - 事件的方式。 />
内部事件属性。在W3C标准浏览器中，功能

有一个名为''event''的形式参数，因此Identifier将

解析为该参数的值，即事件对象。 IE生成的等价的

函数没有正式的参数，所以

标识符 - 事件 - 在作用域链的顶部找不到，而是

IE继续上行 - 直到它到达全局对象，其中它发现（并解析为）global-event-property。

所以在函数声明中做：

函数fnSelect（e）
{
if（！e）{
var e = window.event;
}
<select onclick="fnSelect(event);">
Now W3C browsers will have a reference to the event that
called the function. IE makes it a property of the window
object,
All browsers will pass a reference to the event object to the -
fnSelect - function as an argument. This is due to the way in which the
Identifier - event - is resolved in the context of the internally
generated event handling function created by the browser from the value
of the intrinsic event attribute. In W3C standard browsers that function
has a formal parameter with the name ''event'', so the Identifier resolves
as the value of that parameter, the event object. The equivalent
function generated by IE does not have a formal parameter so the
Identifier - event - is not found at the top of the scope chain, instead
IE goes on up- the scope chain until it gets to the global object where
it finds (and resolves as) the global - event - property.
so in the function declaration do:

function fnSelect( e )
{
if ( !e ) {
var e = window.event;
}



< snip>


这用于以编程方式分配为事件处理程序的函数

但不是在从内部生成的事件处理程序调用的函数中

其中 - event - 作为参数传递给该函数。 （这是

当然，这里无害，因为 - e - 将是假的 - window.event - 将会b / b
永远不会被评估。）


Richard。


<snip>

This is used in functions programmatically assigned as an event handler
but not in functions called from an internally generated event handler
where - event - is passed as an argument to that function. (It is, of
course, harmless here as - e - will be false so - window.event - will
never be evaluated.)

Richard.


这篇关于禁用TR onclick事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆