将事件/功能附加到span标记内的链接 [英] Attach event/function to links within span tag

问题描述

我需要取消链接并执行一个函数onclick span标签内的所有

链接，这些链接的类别为container。分配。

应用此类只有一个span标签。


我知道你可以使用
$ b $获得特定的标签b document.getElementsByTagName（''span''）[0]，但我不确定如何使用class =" container"获得

。我知道有一个getAttribute

方法，只需要一两个指针就可以把它们放在一起。一旦我知道

如何访问我想要的特定链接，就等于< a

href =" hello.do？contains = yes" onclick =" someFunction（this）; return

false"> Hello< / a>。我想我可以添加一个全局函数或

setAttributes。想法？


< span class =" container">

< a href =" hello.do？contains = yes">您好< / a>

< span class =" container">< a

href =" goodbye.do？contains = yes"> Goodbye< ; / a>

< / span>


谢谢，


John

解决方案

johkar写道：

我需要取消链接并执行一个函数onclick的所有
链接span标签，其具有容器类别。已分配。
应用此类只有一个span标记。


以下示例有两个。我猜你不是故意将

容器类添加到嵌套范围内。


我知道你可以得到一个特定的标签使用
document.getElementsByTagName（''span''）[0]，但我不确定如何获得带有class =" container"的那个。我知道有一个getAttribute
方法，只需要一两个指针就可以把它们放在一起。一旦我知道
如何访问我想要的特定链接，就等于< a
href =" hello.do？contains = yes" onclick =" someFunction（this）; return
false"> Hello< / a>。我想我可以添加一个全局函数或
setAttributes。想法？


没有''document.getElementsByClassName''方法，但你可以使用getElementsByTagName获得

所有跨度并找到一个类


函数getElementsByClassName（tName，cName）

{

var t = [];

var el，els = document.getElementsByTagName（tName）;

for（var i = 0，len = els.length; i< len; ++ i）{

el = els [i];

if（el.className&& cName == el.className）{

t [t.length] = el;

}

}

返回t;

}


然后你可以这样做：


var els = getElementsByClassName（''span''，''container''）;

现在如果你只有一个''container''元素，你想要里面的所有A

元素：


函数addClicks（）

{

var els = getElementsByClassName（''span''，''container''）;

var aEl，aEls = els [0] .getElementsByTagName（''a''）;

for（var i = 0，len = aEls.length; I< LEN; ++ i）{

aEl = aEls [i];

if（aEl.href）{

//用aEl做事，例如

aEl.onclick = doAClick;

}

}

}


函数doAClick（）

{

var el = this;

alert（el.href）;

返回false;

}

如果你不想跟随链接，请让onclick函数返回

false但是make HREF对于那些没有脚本的人来说非常有用

启用。或者让脚本首先添加链接，所以非脚本

用户甚至看不到它们。


如果它们不是真的链接，使用其他一些元素并给它们一个

''可点击''样式或使用按钮。


运行''addClicks''onload：


< body onload =" addClicks（）;">

< span class =" container">
< a href =" hello.do？contains = yes"> Hello< / a>
< span class =" container">< a
href =" ; goodbye.do？contains = yes"> Goodbye< / a>
< / span>

谢谢，

John

-

Rob

johkar写道：

我需要取消链接并执行一个函数onclick span标签内的所有
链接，这些链接有一个容器类。分配。
只有一个span标签应用了这个类。

我知道你可以使用
document.getElementsByTagName（''span''）获得一个特定的标签[ 0]，但我不确定如何获得带有class =" container"的那个。我知道有一个getAttribute
方法，只需要一两个指针就可以把它们放在一起。


您不需要也不应该对（X）HTML文档使用getAttribute（）。

虽然在W3C DOM Level 2 HTML中被标记为已弃用，但是

访问属性的最佳方法是使用它们所公开的属性，通过

各自的元素对象接口。

一旦我知道如何访问我想要的特定链接做&equ a一致的< a href =" hello.do？contains = yes" onclick =" someFunction（this）; return
false"> Hello< / a>。


确认

我想我可以添加全局函数或setAttributes。


适用于getAttribute（）的内容也适用于setAttribute（）。

请参阅前面有关如何为

元素事件。


请注意，与有时不同的情况一样，这个

的专有方法无法真正识别符合标准一个，因此


foo.addEventListener（

''点击''，

函数（）

{

// ...

返回false;

}，

false）; 在语义上等于


foo.onclick = function（）

{

// ...

返回false;

};


我最近注意到这一点，同时试图让我的ObjectInspector标准

在这方面是合规的。我观察到使用第一种方法，

无法在`a [href]''

元素上实现可靠的显示属性切换（对于`ul''元素）在Mozilla / 5.0中;然而，再次使用第二种方法可能再次使用
。 （如果我忽略了某些东西，我会

也要感谢任何指针。）

想法？


是的。我已经写过这样一个方法，有几个人之前发过这样的

，但为了不破坏你的编码经验，这里是你要求的b / b指针：


'document''引用的对象有一个getElementsByTagName（）方法

（根据W3C DOM Level 2 HTML的HTMLDocument接口）接受

asterisk（*;而不是元素类型标识符）作为字符串参数

返回DOM树中_all_元素对象的HTMLCollection。您可以通过该集合迭代
并检查每个元素对象的`className''[1]字符串

属性;对所有匹配元素对象的引用

可以安排在Array或用户定义的集合对象中，并且从方法返回
。请注意，`className''，如'class''属性

值，可以是以空格分隔的（CSS）类名列表。


[1]`class''无法指定，因为这是

中的保留字，提供了几种语言的绑定，包括ECMAScript

实现。

< span class =" container">
< a href =" hello.do？contains = yes"> Hello< / a>
< span class =" container">< a
href =" goodbye.do？contains = yes"> Goodbye< / a>
< / span>

虽然'span''元素可以嵌套，但这看起来不像是一个合理的

标记。考虑像`div''这样的块级元素包含其他

块级元素，如'ul''和内联级元素，如'a''和

` span''。

快乐的编码！


PointedEars

完美，谢谢。是的，我并不是要筑巢，只是一个

愚蠢的剪切和粘贴错误。


John

I need to cancel the link and execute a function onclick of all the
links within the span tag which has a class of "container" assigned.
There will be only one span tag with this class applied.

I know you can get a specific tag using
document.getElementsByTagName(''span'')[0], but I am unsure how to get
the one with the class="container". I know there is a getAttribute
method, just need a pointer or two to put it all together. Once I know
how to access the specific links I want do the equivelant of <a
href="hello.do?contain=yes" onclick="someFunction(this);return
false">Hello</a>. I am thinking I can add a global function or
setAttributes. Ideas?

<span class="container">
<a href="hello.do?contain=yes">Hello</a>
<span class="container"><a
href="goodbye.do?contain=yes">Goodbye</a>
</span>

Thanks,

John

解决方案

johkar wrote:

I need to cancel the link and execute a function onclick of all the
links within the span tag which has a class of "container" assigned.
There will be only one span tag with this class applied.
Your example below has two. I''ll guess that you didn''t mean to add the
container class to the nested span.

I know you can get a specific tag using
document.getElementsByTagName(''span'')[0], but I am unsure how to get
the one with the class="container". I know there is a getAttribute
method, just need a pointer or two to put it all together. Once I know
how to access the specific links I want do the equivelant of <a
href="hello.do?contain=yes" onclick="someFunction(this);return
false">Hello</a>. I am thinking I can add a global function or
setAttributes. Ideas?
There is no ''document.getElementsByClassName'' method, but you can get
all the spans using getElementsByTagName and look for one with a class
of ''container'':

function getElementsByClassName(tName, cName)
{
var t = [];
var el, els = document.getElementsByTagName(tName);
for (var i=0, len=els.length; i<len; ++i){
el = els[i];
if (el.className && cName == el.className){
t[t.length] = el;
}
}
return t;
}

Then you can do:

var els = getElementsByClassName(''span'', ''container'');
Now if you only have one ''container'' element and you want all the A
elements inside it:

function addClicks()
{
var els = getElementsByClassName(''span'', ''container'');
var aEl, aEls = els[0].getElementsByTagName(''a'');
for (var i=0, len=aEls.length; i<len; ++i){
aEl = aEls[i];
if (aEl.href){
// do stuff with aEl, e.g.
aEl.onclick = doAClick;
}
}
}

function doAClick()
{
var el = this;
alert(el.href);
return false;
}
If you don''t want the link followed, have the onclick function return
false but make the HREF go somewhere useful for those without scripting
enabled. Or have script add the links in the first place, so non-script
users don''t even see them.

If they aren''t really links, use some other element and give them a
''clickable'' style or use buttons.

Run ''addClicks'' onload:

<body onload="addClicks();">


<span class="container">
<a href="hello.do?contain=yes">Hello</a>
<span class="container"><a
href="goodbye.do?contain=yes">Goodbye</a>
</span>

Thanks,

John

--
Rob

johkar wrote:

I need to cancel the link and execute a function onclick of all the
links within the span tag which has a class of "container" assigned.
There will be only one span tag with this class applied.

I know you can get a specific tag using
document.getElementsByTagName(''span'')[0], but I am unsure how to get
the one with the class="container". I know there is a getAttribute
method, just need a pointer or two to put it all together.
You do not need and should not use getAttribute() for (X)HTML documents.
Although marked as deprecated in W3C DOM Level 2 HTML, the best way to
access attributes there, is to use the properties they are exposed as by
the respective element object interfaces.
Once I know how to access the specific links I want do the equivelant
of <a href="hello.do?contain=yes" onclick="someFunction(this);return
false">Hello</a>.
ACK
I am thinking I can add a global function or setAttributes.
What applies to getAttribute(), applies to setAttribute() as well.
See previous discussions on how to add an event listener for an
event to an element.

Note that unlike stated on occasions, the proprietary approach for this
cannot really be identified with the standards compliant one, hence

foo.addEventListener(
''click'',
function()
{
// ...
return false;
},
false);

in practice is _not_ semantically equal to

foo.onclick = function()
{
// ...
return false;
};

I noticed this recently while trying to make my ObjectInspector standards
compliant in that regard. I observed that using the first approach, it was
not possible to implement a reliable display property toggle on `a[href]''
elements (for `ul'' elements) in Mozilla/5.0; however, it was possible again
using the second approach again. (In case I overlooked something, I would
be thankful for any pointers as well.)
Ideas?
Yes. I have already written such a method and several people posted such
before, but to not spoil your coding experience, here is the pointer you
asked for:

The object referred to by `document'' has a getElementsByTagName() method
(per the HTMLDocument interface of W3C DOM Level 2 HTML) that accepts an
asterisk (*; instead of an element type identifier) as string argument to
return a HTMLCollection of _all_ element objects in the DOM tree. You can
iterate through that collection and check for the `className''[1] string
property of each element object; references to all matching element objects
can be arranged in an Array or a user-defined collection object and
returned from a method. Note that `className'', like the `class'' attribute
value, can be a whitespace-separated list of (CSS) class names.

[1] `class'' could not be specified, since that is a reserved word in
several languages a binding is provided for, including ECMAScript
implementations.
<span class="container">
<a href="hello.do?contain=yes">Hello</a>
<span class="container"><a
href="goodbye.do?contain=yes">Goodbye</a>
</span>

Although `span'' elements can be nested, this does not look like a reasonable
piece of markup. Consider block-level elements like `div'' to contain other
block-level elements like `ul'' and inline-level elements like `a'' and
`span''.
Happy coding!

PointedEars

Perfect, thank you. Yes, I didn''t mean to nest the spans, just a
stupid cut and paste mistake.

John

这篇关于将事件/功能附加到span标记内的链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！