Question

我希望能够在单击时更改表单背景颜色的颜色，但是如果我甚至在表单输入框内单击它也会更改表单背景。

$('form').on('focus', 'input', function(e) {
    $(this).addClass('change');
  })

Answer 1

$(document).on('click', 'input', function(e) {
  e.stopPropagation(); // this will prevent the bubble up to the click of form
}).on('click', 'form', function(e) {
  $(e.currentTarget).toggleClass('change');
})

form {
  height: 150px;
  width: 300px;
  background-color: #ccc;
  text-align: center;
  padding: 20px;
}

.change {
  background-color: lightgreen;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <label for="input">
  Input 
  <input type="text" value="" name="input" />
</label>
</form>

Answer 2

您可以class输入，然后检查用户是否没有点击，请查看：

＆＃13;

$("form").click(function(e) {
  if(e.target.className != 'inputtext') {
    $(this).toggleClass('change');
  }
})

＆＃13;

form {
  background: yellow;
}

.change {
  background: red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form">
  First name:<br>
  <input type="text" name="firstname" class="inputtext"><br>
  Last name:<br>
  <input type="text" name="lastname" class="inputtext">
</form>

＆＃13;

http://jsfiddle.net/UKhAn/167/

仅更改背景颜色

2 个答案: