Question

我通过onclick事件点击了当前这个元素。这是我的HTML代码：

<a href="#" class="h6 label grey-link pg-features-trigger js-FeaturesTrigger" onclick="launchTrigger(this);">Learn more about Personal<i class="icon-down icon-small"></i></a>
<a href="#" class="h6 label grey-link pg-features-trigger js-FeaturesTrigger" onclick="launchTrigger(this);">Learn more about Personal<i class="icon-down icon-small"></i></a>
<a href="#" class="h6 label grey-link pg-features-trigger js-FeaturesTrigger" onclick="launchTrigger(this);">Learn more about Personal<i class="icon-down icon-small"></i></a>

这是我的功能：

function launchTrigger(this) {

        var $this = $(this);
        alert($this);
        $this.toggleClass('is-selected').find('i').toggleClass('is-selected');
        $this.parents('.pg-features').find('ul').toggleClass('list-open');
}

但是这会在Chrome控制台中报告此错误：

Uncaught ReferenceError: launchTrigger is not defined

如何解决这个问题？

Answer 1

您不能接受"this"作为参数名称，因为它是reserved keyword。

同时在click-handler中添加event.preventDefault()以取消活动。

function launchTrigger(elem, e) {
  e.preventDefault();
  alert(elem);
}

<a href="#" class="h6 label grey-link pg-features-trigger js-FeaturesTrigger" onclick="launchTrigger(this,event);">Learn more about Personal<i class="icon-down icon-small"></i></a>
<a href="#" class="h6 label grey-link pg-features-trigger js-FeaturesTrigger" onclick="launchTrigger(this,event);">Learn more about Personal<i class="icon-down icon-small"></i></a>
<a href="#" class="h6 label grey-link pg-features-trigger js-FeaturesTrigger" onclick="launchTrigger(this,event);">Learn more about Personal<i class="icon-down icon-small"></i></a>

solution

建议的另一个Jaromanda X

Answer 2

但是这会在Chrome控制台中报告此错误：


未捕获的ReferenceError：未定义launchTrigger


如何解决这个问题？

从onxyz="..."属性调用的函数必须是全局函数。（不使用它们的几个原因之一。）从错误中可以看出，您的函数未被全局声明，但可能在某种作用域范围内。

将其移至全局范围，如果您修复了函数参数的名称，它将起作用，因为this是保留字。但当然，这是以创造又一个全球化为代价的。已经有太多的全局数据在网页中肆虐并且经常相互冲突。

相反，使用现代事件处理来使用addEventListener（旧IE上的attachEvent）来连接处理程序。

Answer 3

在onclick事件中，你可以在课堂上添加jquery click事件我在这里添加了工作代码，请看一下。

＆＃13;

$(document).ready(function(e) {
  $(document).on("click", ".launchTrigger", function(e) {
    alert($(this));
    $(this).toggleClass('is-selected').find('i').toggleClass('is-selected');
    $(this).parents('.pg-features').find('ul').toggleClass('list-open');
    return false;
  });

});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" class="h6 label grey-link pg-features-trigger launchTrigger js-FeaturesTrigger">Learn more about Personal<i class="icon-down icon-small"></i></a>
<a href="#" class="h6 label grey-link pg-features-trigger launchTrigger js-FeaturesTrigger">Learn more about Personal<i class="icon-down icon-small"></i></a>
<a href="#" class="h6 label grey-link pg-features-trigger launchTrigger js-FeaturesTrigger">Learn more about Personal<i class="icon-down icon-small"></i></a>

＆＃13;

Answer 4

从标记中获取代码：

yaml

使用JavaScript添加：

function launchTrigger() {
  var $this = $(this);
  alert($this);
  $this.toggleClass('is-selected').find('i').toggleClass('is-selected');
  $this.parents('.pg-features').find('ul').toggleClass('list-open');
}

修订标记：

var elems = document.getElementsByClassName('pg-features-trigger js-FeaturesTrigger');
Array.prototype.map.call(elems, function(el) {
  el.addEventListener("click", launchTrigger, false);
});

请注意jQuery使用该函数：使用apply并取出参数

<a href="#" class="h6 label grey-link pg-features-trigger js-FeaturesTrigger">Learn more about Personal<i class="icon-down icon-small"></i></a>
<a href="#" class="h6 label grey-link pg-features-trigger js-FeaturesTrigger">Learn more about Personal<i class="icon-down icon-small"></i></a>
<a href="#" class="h6 label grey-link pg-features-trigger js-FeaturesTrigger">Learn more about Personal<i class="icon-down icon-small "></i></a>

编辑：注意如果你喜欢参数方法，你可以像这样使用事件目标：

$('.pg-features-trigger.js-FeaturesTrigger').on('click', function(e) {
  launchTrigger.apply(this);
});

Answer 5

当有人特别要求纯JavaScript解决方案时，无法相信所有JQUERY答案。

如果要返回单击的元素，可以使用：

function whoami(event) {
  var test = event.target.id;
  alert(test);
  console.log(test);
}

<a onclick="whoami(event)">

传递此元素并获得纯JavaScript

5 个答案: