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>