我有一个基本的模态,其 html 结构中有一个 svg 图标。我想检测模式之外的点击,以便我可以将其关闭。执行此操作的代码类似于以下内容:
document.addEventListener('mousedown', (e) => {
if(modal.contains(e.target)) return;
closeModal();
});
但是,当我单击 svg(位于模态内部)时,单击事件被认为位于模态外部,我不明白为什么。为了让它按照我想要的方式工作,我必须对 svg 元素执行pointer-events: none。
简化的 html 结构如下所示:
<div class="modal">
<div class="css-t7awl3">
<form>
<div class="css-1incodr">
<label class="css-g2pzhe" for="previousPassword">
Mot de passe actuel<span class="css-5fl39m">*</span>
</label>
<div class="css-1xm32e0">
<input
class="css-17lan49"
type="text"
placeholder="**********"
name="previousPassword"
/>
<div id="test-input-toggle-password-visibility" class="css-1vw18kh">
<svg
height="16"
viewBox="0 0 32 32"
fill="none"
xmlns="http://www.w3.org/2000/svg"
/>
</div>
</div>
</div>
<button class="css-1pnrrva" disabled="">
Valider
</button>
</form>
</div>
</div>
编辑:如果我在此处粘贴实际的反应代码,也许会有所帮助,因为我不确定它是否是 svg 元素而不是我的代码的问题。
export const PasswordInput = React.forwardRef<HTMLInputElement, PasswordInputProps>(({
placeholder,
name,
id,
disabled,
className,
}: PasswordInputProps, ref) => {
const [showPassword, setShowPassword] = useState(false);
const DisplayedPicto = showPassword ? ClosedEyePicto : EyePicto;
return (
<Container className={className}>
<CustomInput
className={className}
type={showPassword ? 'text' : 'password'}
placeholder={placeholder}
name={name}
disabled={disabled}
ref={ref}
id={id}
/>
<StyledSuffix
onMouseLeave={() => setShowPassword(false)}
onMouseDown={() => setShowPassword(true)}
onMouseUp={() => setShowPassword(false)}
id='test-input-toggle-password-visibility'
>
<DisplayedPicto height={16} /> //svg element
</StyledSuffix>
</Container>
);
});