Question

为什么我的event.target不起作用？

好的，请帮我找到问题，我的HTML是

<input type="text">

我的css是

.bg {
  background-color:#777;
  outline:none;
  border:solid 2px tomato;
}

和我的js，

const input = document.querySelector('input');
input.addEventListener('click', (e) => {
  if (e.target.tagName === 'INPUT') {
    input.className = "bg";
  } else {
    input.className = "";
  }   
});

现在，当我点击输入元素时，“bg”类名称正在添加，但是，当我点击输入元素外部时，它为什么不删除？

Answer 1

这是因为您要向class NewsletterType extends AbstractType { public function buildForm(FormBuilderInterface $builder, array $options) { $builder ->add('subscribingNewsletter', CheckboxType::class, [ 'label' => 'form.label.newsletter', 'required' => false, ]) ->add('submit', SubmitType::class); } public function configureOptions(OptionsResolver $resolver) { $resolver->setDefaults([ 'data_class' => User::class, ]); } }对象添加点击事件监听器，因此input始终为e.target.tagName，如果您将事件监听器添加到"INPUT"，它将起作用。但是，

请尝试使用css伪选择器document/body，根据您的需要添加事件根本不需要

:focus

Answer 2

如果您想使用Javascript完成此操作，那么您应该同时使用焦点和模糊事件。

这是代码。这样，当输入元素失去焦点时，可以删除类。

＆＃13;

const input = document.querySelector('input');

function inputBGHandler(e) {
  if (e.type === "focus") {
    input.className = "bg";
} else {
  input.className = "";
}
}

input.addEventListener('focus', inputBGHandler);
input.addEventListener('blur', inputBGHandler);

＆＃13;

.bg {
  background-color:#777;
  outline:none;
  border:solid 2px tomato;
}

＆＃13;

<input type="text">

＆＃13;

为什么我的event.target不起作用？

2 个答案: