Question

在研究JQuery的“ on”方法时，我遇到了一个有趣的问题。我做了很多尝试，但是没有任何具体的方法来实现它

我想要什么？

我有一个下面的HTML（我无法编辑其中任何内容）

    <div id='apple1' class="apple">  Apple1 </div>
    <div id='apple2' class="apple">  Apple2 </div>
    <div id='apple3' class="apple">  Apple3 </div>

首先让我们看一个功能，我们将在点击回调中使用它

var fun = function(event) { 
    console.log('example', this);
}

现在让我们将其附加到HTML元素

$('.apple').on('click', fun)

现在，单击Apple1之后，我们将在控制台中获取它

example, <div class=".apple" id="apple1">

查看摘要：

var fun = function(event) { 
    console.log('example', this);
 }
$('.apple').on('click', fun)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id='apple1' class="apple">  Apple1 </div>
<div id='apple2' class="apple">  Apple2 </div>
<div id='apple3' class="apple">  Apple3 </div>

现在我想将回调函数绑定到其他东西，因此让我们将上面的代码更改为：

var funBinded = fun.bind({name: 'JQuery'})
 $('.apple').on('click', funBinded)

输出将是：

example, >{name: 'JQuery'}

查看摘要：

var fun = function(event) { 
    console.log('example', this);
 }
var funBinded = fun.bind({name: 'JQuery'})
$('.apple').on('click', funBinded)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id='apple1' class="apple">  Apple1 </div>
<div id='apple2' class="apple">  Apple2 </div>
<div id='apple3' class="apple">  Apple3 </div>

现在，这里的“ this”将指向绑定的对象，而不是单击HTML元素。在第二种情况下，点击可能是由任何div（“ Apple1”，“ Apple2”，“ Apple3”）触发的。

那么我怎么知道在哪单击了哪个元素？

还请注意： 我无法在HTML文档中进行任何更改，因此无法使用以下方法：

<div id='apple1' class="apple" onclick="fun(event, this)">  Apple1 </div>

我也不想使用even.target，因为它可以让我点击最里面的元素，而不是注册事件的那个元素

Answer 1

更改范围后，处理程序函数将在其作用域下运行（通过使用bind()）this将不再是单击的元素。

如果您仍然需要引用事件绑定到的元素（如您的问题所述，不是引发事件的元素），请使用currentTarget的{{1}}属性将其作为参数传递给事件处理程序：

event

var fun = function(e) {
  console.log('example', this);
  console.log(e.currentTarget);
}

var funBinded = fun.bind({
  name: 'JQuery'
})

$('.apple').on('click', funBinded)

请注意，我将文本包裹在<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="apple1" class="apple"><span>Apple1</span></div> <div id="apple2" class="apple"><span>Apple2</span></div> <div id="apple3" class="apple"><span>Apple3</span></div>的{{1}}元素内，以表明.apple属性返回的是正确的元素。

对多个HTML元素进行绑定的Click回调并获得实际元素的点击

1 个答案: