如何获取 onclick 函数在 JavaScript 中被调用的位置

Question

任何人都可以给我有关如何确定 onclick 事件被调用的位置的语法吗？

我想根据 onclick 的来源来更改 h4 内容

例如：

• 如果在“knitted badages”中调用 label() ，则 h4 insidehtml 将是“writing badages” “
• 如果在“编织带”中调用 label() ，h4 insidehtml 将是“编织带”

我想将其合并到一个函数中，而不是为每个类别创建一个函数目前我正在使用下面的 JavaScript。如何将其创建为if条件？

function label()
{   document.getElementsByTagName("h4")[0].innerHTML="badges";}


<ul class="overview">

<li><img src="images/UniwinNav.jpg" align="texttop"/><a href=""><div class="listlabel">Woven Labels</div></a></li>

<li><img src="images/UniwinNav.jpg" align="texttop"/><a href="#" onClick='label()'><div class="listlabel">Woven Badges</div></a></li>

<li><img src="images/UniwinNav.jpg" align="texttop"/><a href=""><div class="listlabel">Woven Tapes</div></a></li>
<li><img src="images/UniwinNav.jpg" align="texttop"/><a href=""><div class="listlabel">Woven WaistBands</div></a></li>


<h4>Product Specification</h4>

</ul>

Answer 1

只需在函数标签中添加参数：

label(type)

并在 html 中定义类型：

 <a href="#" onClick="label('badges')">Woven Badges</a>
 <a href="#" onClick="label('tapes')">Woven tapes</a>

并在函数标签中，对每种类型进行处理。

PS：您不应在“a”元素中添加“div”元素

Answer 2

只需将 this 作为参数传递给 label() 函数即可。它是对发起事件的元素的引用。然后，您可以通过抓取第一个子元素的内部 HTML 轻松找到所需的字符串。

<script type="text/javascript">
function label(element) {
    document.getElementsByTagName("h4")[0].innerHTML=element.firstChild.innerHTML;
    return false;
}
</script>

<ul class="overview">

<li><img src="images/UniwinNav.jpg" align="texttop" /><a href="#" onclick="return label(this)"><div class="listlabel">Woven Labels</div></a></li>
<li><img src="images/UniwinNav.jpg" align="texttop" /><a href="#" onclick="return label(this)"><div class="listlabel">Woven Badges</div></a></li>
<li><img src="images/UniwinNav.jpg" align="texttop" /><a href="#" onclick="return label(this)"><div class="listlabel">Woven Tapes</div></a></li>
<li><img src="images/UniwinNav.jpg" align="texttop" /><a href="#" onclick="return label(this)"><div class="listlabel">Woven WaistBands</div></a></li>

<h4>Product Specification</h4>

请注意，最好向 label() 函数添加返回值，并在单击元素时返回它。这将取消默认的浏览器操作，这意味着您不会在您的位置看到讨厌的 # 字符。

Answer 3

您在任何事件处理程序中都有一个上下文 - this。它绑定到与事件关联的元素。所以你可以这样做：

function my_handler(elem) {
  elem.href // contains href of anchor, eg '#Woven_WaistBands'
}

<li><img src="images/UniwinNav.jpg" align="texttop"/><a href="#Woven_Tapes" onclick="my_handler(this); return false;"><span class="listlabel">Woven Tapes</span></a></li>
<li><img src="images/UniwinNav.jpg" align="texttop"/><a href="#Woven_WaistBands" onclick="my_handler(this); return false;"><span class="listlabel">Woven WaistBands</span></a></li>

<h4 id="Woven_Tapes">blah blah</h4>
<h4 id="Woven_WaistBands">...</h4>

但最好不要重复自己，并使用 jQuery 或本机 addEventListenet 将处理程序绑定到事件（由于 IE，目前这种方式不太便携）。

Answer 4

添加一个参数，当调用 label() 时，它将传递源。您可以传递一个字符串，如下所示，或者您可以传递锚点本身并将其与 jquery 一起使用来查找您正在修改的子项。您不必使用 jQuery，但如果您想的话，我向您展示了下面的示例。

function label(source){
    $(source).find('h4').html('badges');
};

<a href... onClick='label(this)'>