点击即可获得高阶块的ID

Question

我有一个高阶块和一个嵌套块。我希望在点击时获得parent id，但其child似乎是一个事件目标。

如何让JS将parent视为事件目标或以其他方式获取id。

• 我无法明确指定所需的DOM块（e.g. document.getElementById(...)），因为它们是动态显示的。
• parent可能不是child
的直接父级

＆＃13;

＆＃13;

function saveID(e) {
  const display = document.getElementById("display");

  if (e.target.id) {
    display.innerHTML = (`Parent's key is: ${e.target.id}`);
  } else {
    display.innerHTML = "Won't happen";
  }
}

＆＃13;

.parent {
  border: 1px solid black;
  cursor: pointer;
  display: inline-block;
}

.child {
  border: 2px solid lightblue;
  padding: 5px 15px;
  transition: all 0.3s ease-in-out;
}

.child:hover {
  background-color: lightgreen;
  border-color: green;
}

#display {
  border: 1px solid gray;
  height: 50px;
  margin-top: 10px;
  padding: 5px 10px;
  width: 83px;
}

＆＃13;

<div class="parent" id="1" onclick="saveID()">
  <div class="child">
    Hey there!
  </div>
</div>
<div id="display"></div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您需要在目标上使用currentTarget，因为它提供了定义onclick事件的元素

function saveID(e) {
  const display = document.getElementById("display");

  if (e.currentTarget.id) {
    display.innerHTML = (`Parent's key is: ${e.target.id}`);
  } else {
    display.innerHTML = "Won't happen";
  }
}

Answer 2

如果您想要点击孩子的父ID，请将onclick添加到孩子，并let result = arr1.map((item, index) => ({...item, ...arr2[index]})); 获取父ID

e.target.parentNode.id

function saveID(e) {
  const display = document.getElementById("display");

  if (e.target.id) {
    display.innerHTML = (`Parent's key is: ${e.target.parentNode.id}`);
  } else {
    display.innerHTML = "Won't happen";
  }
}

.parent {
  border: 1px solid black;
  cursor: pointer;
  display: inline-block;
}

.child {
  border: 2px solid lightblue;
  padding: 5px 15px;
  transition: all 0.3s ease-in-out;
}

.child:hover {
  background-color: lightgreen;
  border-color: green;
}

#display {
  border: 1px solid gray;
  height: 50px;
  margin-top: 10px;
  padding: 5px 10px;
  width: 83px;
}

Answer 3

从classname

获取id属性值

import {
  Text,
  Button,
  View,
  Image,
  Divider,
  Spinner,
  NavigationBar,
  Caption
} from '@shoutem/ui';


render() {
  const {navigate} = this.props.navigation;
  if (this.state.submitted && this.props.loading) {
    return (
      <Spinner style={{
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center'
      }} />
    );
  }
  return (
    <Container style={{ flex: 1, backgroundColor: '#ffffff' }}>
      <Content>
          <NavigationBar
            styleName='no-border'
            hasHistory
            navigateBack={() => navigate('WelcomeScreen')}
        />
        <Grid>
          <Row style={{ height: 100, justifyContent: 'center', alignItems: 'center', paddingTop: 100 }}>
            <Image
              style={{ width: 96, height: 89 }}
              source={require('../login-logo.png')}
              blurRadius={1} />
          </Row>              
          //some other rows and columns
        </Grid>
      </Content>
    </Container>
    );
   }
 }

function saveID() {
  const display = document.getElementById("display");
  var res  = document.getElementsByClassName("parent")[0].getAttribute('id');

//get the id  Attribute  value from classname 

  if (res) {
    display.innerHTML = (`Parent's key is: ${res}`);
  } else {
    display.innerHTML = "Won't happen";
  }
}

.parent {
  border: 1px solid black;
  cursor: pointer;
  display: inline-block;
}

.child {
  border: 2px solid lightblue;
  padding: 5px 15px;
  transition: all 0.3s ease-in-out;
}

.child:hover {
  background-color: lightgreen;
  border-color: green;
}

#display {
  border: 1px solid gray;
  height: 50px;
  margin-top: 10px;
  padding: 5px 10px;
  width: 83px;
}