Question

我试图为div元素实现onClick处理程序。父div具有数据参数，而子div没有任何内容。当我点击子节点时，正在调用onlick处理程序但没有数据参数存在。如果我单击父元素，那么我可以找到数据参数。我的问题是如果onclick动作可以传递给子元素如何对数据元素做同样的事情？

当我点击父元素时，我得到的日志是：

{
 "id": "1",
 "id1": "2",
 "id3": "3"
}

当我点击我得到的日志中的子元素时：

{}

以下是我的代码

$('.base_div').click(function(ev){console.log(ev.target.dataset);})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
    <div class="col-md-4">
	    <div class="content-box base_div" data-id="1" data-id1="2" data-id3="3" style="padding: 30px;">
		<div>
		    Child Element 1
		</div>
		<div class="test_class">
		    Child Element 2
		</div>
	    </div>
	</div>

Answer 1

您应该将ev.target替换为ev.currentTarget，因为event.currentTarget始终是指事件处理程序附加到的元素。

event.target标识事件发生的元素。

或者您只需将ev.target替换为this。

See MDN

$('.base_div').click(function(ev){console.log(ev.currentTarget.dataset);})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
    <div class="col-md-4">
	    <div class="content-box base_div" data-id="1" data-id1="2" data-id3="3" style="padding: 30px;">
		<div>
		    Child Element 1
		</div>
		<div class="test_class">
		    Child Element 2
		</div>
	    </div>
	</div>

将数据参数从父级传递给子级

1 个答案: