Question

我有一个通过循环创建的用户列表（来自API的数据）。当它的任何子元素被单击时，我试图返回父元素的ID。

示例：如果用户单击任何div（.user-info，.user-name或.user-city），我希望能够返回父div.user的ID

我尝试遍历user-list的所有子元素，但是我只是得到一个空对象，因为这些项目是在页面加载后添加的。

我看过事件冒泡，但它总是冒泡到用户列表。我无法停止在.user

我尝试了类似的方法，但是它只返回每个元素，而不返回父代的ID：

const userList = document.querySelector(".user-list");

userList.addEventListener("click", event => {
  if (event.target.classList.contains('user')) {
    console.log(event.target)
  }
});

<div class="user-list">
  <div class="user" id="1">
    <div class="user-photo">
      <img src="https://randomuser.me/api/portraits/men/91.jpg" alt="" />
    </div>
    <div class="user-info">
      <div class="user-name">josef moore</div>
      <div class="user-email email-wrap">josef.moore@example.com</div>
      <div class="user-city">winchester</div>
    </div>
  </div>
  <div class="user" id="2">
    <div class="user-photo">
      <img src="https://randomuser.me/api/portraits/men/98.jpg" alt="" />
    </div>
    <div class="user-info">
      <div class="user-name">alexander richardson</div>
      <div class="user-email email-wrap">alexander.richardson@example.com</div>
      <div class="user-city">stoke-on-trent</div>
    </div>
  </div>
  <div class="user" id="3">
    <div class="user-photo">
      <img src="https://randomuser.me/api/portraits/men/98.jpg" alt="" />
    </div>
    <div class="user-info">
      <div class="user-name">alexander richardson</div>
      <div class="user-email email-wrap">alexander.richardson@example.com</div>
      <div class="user-city">stoke-on-trent</div>
    </div>
  </div>
</div>

Answer 1

const userList = document.querySelector(".user-list");

userList.addEventListener("click", event => {
    var element = event.target;
    alert(element.closest('.user').id);
});

Element接口的最近方法（）返回当前元素（或当前元素本身）的最接近祖先。

注意：IE不支持，但可以使用polyfill。

引用：https://developer.mozilla.org/en-US/docs/Web/API/Element/closest

Working Demo

Answer 2

像这样吗？

'-----------------begin of form Code

Option Compare Database
Option Explicit

Private Sub btnDetermineBitVersion_Click()
    Dim isSixtyFour As Boolean
    Dim strMessage As String

    isSixtyFour = IsOffice64Bit()

    If isSixtyFour Then
        strMessage = "Using 64 bit version of Microsoft Access"
    Else
        strMessage = "Using 32 bit version of Microsoft Access"
    End If

    MsgBox strMessage, vbInformation, "Library Health Check"

End Sub
' ----------------------- end of Form code
'------------------------ begin of Module
Option Compare Database
Option Explicit

Public Const PROCESSOR_INTEL_386 As Long = 386
Public Const PROCESSOR_INTEL_486 As Long = 486
Public Const PROCESSOR_INTEL_PENTIUM As Long = 586
Public Const PROCESSOR_MIPS_R4000 As Long = 4000
Public Const PROCESSOR_ALPHA_21064 As Long = 21064
Public Const PROCESSOR_PPC_601 As Long = 601
Public Const PROCESSOR_PPC_603 As Long = 603
Public Const PROCESSOR_PPC_604 As Long = 604
Public Const PROCESSOR_PPC_620 As Long = 620
Public Const PROCESSOR_HITACHI_SH3 As Long = 10003
Public Const PROCESSOR_HITACHI_SH3E As Long = 10004
Public Const PROCESSOR_HITACHI_SH4 As Long = 10005
Public Const PROCESSOR_MOTOROLA_821 As Long = 821
Public Const PROCESSOR_SHx_SH3 As Long = 103
Public Const PROCESSOR_SHx_SH4 As Long = 104
Public Const PROCESSOR_STRONGARM As Long = 2577
Public Const PROCESSOR_ARM720 As Long = 1824
Public Const PROCESSOR_ARM820 As Long = 2080
Public Const PROCESSOR_ARM920 As Long = 2336
Public Const PROCESSOR_ARM_7TDMI As Long = 70001

Public Const PROCESSOR_ARCHITECTURE_INTEL As Long = 0
Public Const PROCESSOR_ARCHITECTURE_MIPS As Long = 1
Public Const PROCESSOR_ARCHITECTURE_ALPHA As Long = 2
Public Const PROCESSOR_ARCHITECTURE_PPC As Long = 3
Public Const PROCESSOR_ARCHITECTURE_SHX As Long = 4
Public Const PROCESSOR_ARCHITECTURE_ARM As Long = 5
Public Const PROCESSOR_ARCHITECTURE_IA64 As Long = 6
Public Const PROCESSOR_ARCHITECTURE_ALPHA64 As Long = 7
Public Const PROCESSOR_ARCHITECTURE_AMD64 As Long = 9
Public Const PROCESSOR_ARCHITECTURE_UNKNOWN As Long = &HFFFF&

Public Const PROCESSOR_LEVEL_80386 As Long = 3
Public Const PROCESSOR_LEVEL_80486 As Long = 4
Public Const PROCESSOR_LEVEL_PENTIUM As Long = 5
Public Const PROCESSOR_LEVEL_PENTIUMII As Long = 6

Public Const sCPURegKey = "HARDWARE\DESCRIPTION\System\CentralProcessor\0"

Public Const HKEY_LOCAL_MACHINE As Long = &H80000002


#If VBA7 Then
    Public Type SYSTEM_INFO
       wProcessorArchitecture As Integer
       dwOemID As Long
       dwPageSize As Long
       lpMinimumApplicationAddress As LongPtr
       lpMaximumApplicationAddress As LongPtr
       dwActiveProcessorMask As LongPtr
       dwNumberOfProcessors As Long
       dwProcessorType As Long
       dwAllocationGranularity As Long
       wProcessorLevel As Integer
       wProcessorRevision As Integer
    End Type
#Else
    Public Type SYSTEM_INFO
       wProcessorArchitecture As Integer
       dwOemID As Long
       dwPageSize As Long
       lpMinimumApplicationAddress As Long
       lpMaximumApplicationAddress As Long
       dwActiveProcessorMask As Long
       dwNumberOfProcessors As Long
       dwProcessorType As Long
       dwAllocationGranularity As Long
       wProcessorLevel As Integer
       wProcessorRevision As Integer
    End Type
#End If

#If VBA7 Then
    Public Declare PtrSafe Sub GetSystemInfo Lib "kernel32" (lpSystemInfo As SYSTEM_INFO)
#Else
    Public Declare Sub GetSystemInfo Lib "kernel32" (lpSystemInfo As SYSTEM_INFO)
#End If

#If VBA7 Then
    Declare PtrSafe Function IsWow64Process Lib "kernel32" ( _
        ByVal hProcess As LongPtr, _
        ByRef Wow64Process As Boolean) As Boolean

    Declare PtrSafe Function GetCurrentProcess Lib "kernel32" () As LongPtr
#Else
    Declare Function IsWow64Process Lib "kernel32" ( _
        ByVal hProcess As Long, _
        ByRef Wow64Process As Boolean) As Boolean

    Declare Function GetCurrentProcess Lib "kernel32" () As Long
#End If

Function IsOffice64Bit() As Boolean

    Dim SI As SYSTEM_INFO

    IsOffice64Bit = False
    GetSystemInfo SI
    If SI.wProcessorArchitecture = PROCESSOR_ARCHITECTURE_AMD64 Then
        IsWow64Process GetCurrentProcess(), IsOffice64Bit
        IsOffice64Bit = Not IsOffice64Bit
    End If

End Function

'------------------------end of Module

Working demo

Answer 3

它可能被认为是“预算”方法，但是您可以沿着元素树前进，直到找到user，然后检查其id：

document.getElementsByClassName("user-list").item(0).addEventListener("click",function(event){
  var target=event.target;
  var classes;
  while(!(classes=target.classList).contains("user-list")){
    if(classes.contains("user")){
      console.log(target.id);
    }
    target=target.parentElement;
  }
});

<div class="user-list">
  <div class="user" id="1">
    <div class="user-photo">
      <img src="https://randomuser.me/api/portraits/men/91.jpg" alt="" />
    </div>
    <div class="user-info">
      <div class="user-name">josef moore</div>
      <div class="user-email email-wrap">josef.moore@example.com</div>
      <div class="user-city">winchester</div>
    </div>
  </div>
  <div class="user" id="2">
    <div class="user-photo">
      <img src="https://randomuser.me/api/portraits/men/98.jpg" alt="" />
    </div>
    <div class="user-info">
      <div class="user-name">alexander richardson</div>
      <div class="user-email email-wrap">alexander.richardson@example.com</div>
      <div class="user-city">stoke-on-trent</div>
    </div>
  </div>
  <div class="user" id="3">
    <div class="user-photo">
      <img src="https://randomuser.me/api/portraits/men/98.jpg" alt="" />
    </div>
    <div class="user-info">
      <div class="user-name">alexander richardson</div>
      <div class="user-email email-wrap">alexander.richardson@example.com</div>
      <div class="user-city">stoke-on-trent</div>
    </div>
  </div>
</div>

Answer 4

如果您使用Jquery，则为代码

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
    $(function() {
        $('.user-info, .user-name, .user-city').click(function() {
            var div_id = $(this).closest('.user').attr('id');
            console.log(div_id);
        });
    });
</script>

当任何孩子点击新创建的元素时，如何获取父元素的ID

4 个答案: