事件穿透与禁止穿透(e.stopPropagation()、e.preventDefault()、return false)

问题：点击立即预约按钮会同时触发查看详情事件解决方案：在顶层事件中添加禁止穿透事件可防止触发底层事件。const goAppointment = e => {e.stopPropagation(); // 禁止事件冒泡};const AuthenticateItem = ({ appraisalType, data, onClick = () => {} }) => (<d

若♀阳

2841人浏览 · 2021-06-03 09:19:23

若♀阳 · 2021-06-03 09:19:23 发布

e.stopPropagation(); // 阻止了事件冒泡，但不会阻止浏览器的默认行为（如a标签跳转，f5刷新浏览器等）

问题：点击立即预约按钮会同时触发查看详情事件

解决方案：在顶层事件中添加禁止穿透事件可防止触发底层事件。

const goAppointment = e => {
  e.stopPropagation(); // 禁止事件冒泡
};

const AuthenticateItem = ({ appraisalType, data, onClick = () => {} }) => (
  <div
    className={styles.lawyerItem}
    style={{ width: appraisalType === 'FindAnAppraisalAgency' && '605px' }}
    onClick={onClick}
  >
    <img
      src={(data.avator && data.avator.url) || (data.picture && data.picture.url) || defaultImg}
      alt=""
    />
    {appraisalType === 'FindAnAppraisalAgency' && (
      <>
        <div className={styles.lawyerFirm}>
          <h3>{data.name}</h3>
          <Button className={styles.appointmentBtn} onClick={e => goAppointment(e)}>
            立即预约
          </Button>
        </div>
        <div className={styles.telAndAddr10PX}>
          <div className={styles.telAndAddrDesc}>机构电话：{data.phone}</div>
          <div className={styles.telAndAddrDesc}>地址：{data.address}</div>
        </div>
        <div className={`${styles.scopeOfIdentification}`}>
          {data.bizScope &&
            data.bizScope.map(
              id =>
                identificationScope.find(item => item.id === id) && (
                  <span key={id} className={styles.identification}>
                    {identificationScope.find(item => item.id === id).name}
                  </span>
                ),
            )}
        </div>
      </>
    )}
    {appraisalType === 'FindAnAppraisal' && (
      <>
        <h3>{data.name}</h3>
        <div className={styles.itemDesc}>{data.institutionName}</div>
        <div className={`${styles.abilitys}`}>
          {data.businessTypeEnum &&
            data.businessTypeEnum.map(
              id =>
                identificationScope.find(item => item.id === id) && (
                  <span key={id} className={styles.ability}>
                    {identificationScope.find(item => item.id === id).name}
                    {/* {intl.get(identificationScope.find(item => item.id === id).name)} */}
                  </span>
                ),
            )}
        </div>
      </>
    )}
  </div>
);

e.preventDefault();// 阻止默认行为

return false;// 阻止默认行为和事件冒泡

<!DOCTYPE html>
<html>
<head>
  <title>js</title>
  <!--<script src="https://unpkg.com/vue"></script> -->
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
  <div  > 
	<a id="link" href="http://www.baidu.com">百度</a>
  </div>
  
  <script>
   var link = document.getElementById("link");
    link.onclick = function(e){
        // 事件对象的preventDefault方法,可以阻止本次事件所触发的浏览器默认行为
        e.preventDefault();
		// 阻止事件冒泡，但不会阻止浏览器默认行为
		// e.stopPropagation();
		
		//return false;// 阻止事件冒泡和默认事件
    }
 
    document.body.onkeydown = function(e){
        // 116是F5
        if(e.keyCode == 116){
            e.preventDefault();
        }
    }

  </script>
</body>
</html>

华为开发者联盟HarmonyOS专区

鸿蒙生态一站式服务平台。

更多推荐

【grafana】使用教程

华为开发者联盟HarmonyOS专区

【PX4-AutoPilot教程-开发环境】使用VMware虚拟机安装Ubuntu系统并搭建PX4开发环境（ROS+mavros+jMAVSim+gazebo+QGC+QT）

学习PX4开发需要先配置好开发环境，对于新手推荐使用VMware虚拟机搭建Ubuntu系统，并下载PX4源码，配置好编译环境和工具链（ROS操作系统+mavros通信包+jMAVSim仿真+gazebo仿真+QGC地面站+QT开发平台）。教程中使用的是Ubuntu18.04系统（官方推荐使用版本），PX4固件版本为v1.13.0，飞控板为pixhawk2.4.8版本。