为每个前一个元素执行函数以及

Question

我目前正在创建一个codepen，您可以在打开上下文菜单时更改页面上每个元素的颜色，背景颜色，文字等....

我存储元素，我在变量中右键单击：

var x = event.clientX, y = event.clientY,
    efp = document.elementFromPoint(x, y);

当我在控制台中返回该变量efp的值时，它会返回正确的元素。

现在问题：
更改（例如文本元素）的颜色可以正常工作。但是当我再次尝试这样做时，它不仅会改变元素，还会更改我之前更改的元素。

这样的东西：
更改颜色p - ＆gt;更改p
更改section - >的背景更改section 和 p
更改h1 - >的颜色更改h1 AND section AND p

这是我的完整代码：

＆＃13;

＆＃13;

$(document).on("contextmenu", function(e){
  $('.custom-menu li').show(0);
  e.preventDefault();
  var el = e.target.nodeName;
  var x = event.clientX, y = event.clientY,
      efp = document.elementFromPoint(x, y);
  console.log(efp);
  switch(el){
    case "P":
      ctxP();
      break;
    case "CONTENT":
      ctxCon();
      break;
    case "HEADER":
      ctxHead();
      break;
    case "FOOTER":
      ctxFoot();
      break;
  }
  $(".custom-menu li").on("click", function(){
    switch($(this).attr("data-action")) {
      case "color": 
        colorPick();
        break;
      case "bgcolor": 
        bgcolorPick();
        break;
      case "text": 
        textChange();
        break;
    }
    $(".custom-menu").fadeOut(100);
  });
  $(".custom-menu").finish().fadeIn(100).css({
    top: e.pageY + "px",
    left: e.pageX + "px"
  });
  function ctxP(){
    $('.custom-menu li[data-action=bgcolor]').hide();
  }
  function ctxCon(){
    $('.custom-menu li[data-action=color]').hide();
    $('.custom-menu li[data-action=text]').hide();
  }
  function ctxHead(){
    $('.custom-menu li[data-action=color]').hide();
    $('.custom-menu li[data-action=text]').hide();
  }
  function ctxFoot(){
    $('.custom-menu li[data-action=color]').hide();
    $('.custom-menu li[data-action=text]').hide();
  }
  function colorPick(){
    $(".overlay").fadeIn();
    $(".colorpicker").fadeIn().css('display', 'flex');
    $(".color").click(function(){
      var color = $(this).css('background-color');
      $(efp).css('color', color);
      $(".colorpicker, .overlay").fadeOut();
    });
  }
  function bgcolorPick(){
    $(".overlay").fadeIn();
    $(".colorpicker").fadeIn().css('display', 'flex');
    $(".color").click(function(){
      var color = $(this).css('background-color');
      $(efp).css('background-color', color);
      $(".colorpicker, .overlay").fadeOut();
    });
  }
  function textChange(){
    $(".overlay, .textChange").fadeIn();
    $('.textChange input').keypress(function(e) {
      var text = $(this).val();
      if(e.keyCode == 13){
        $(efp).text(text);
        $(".overlay, .textChange").fadeOut();
        $(this).val("");
      }
    });
  }
});

$(document).click(function(e){    
  if (!$(e.target).parents(".custom-menu").length > 0) {
    $(".custom-menu").fadeOut(100);
  }
});

＆＃13;

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}
header,content,footer{
  display:block;
  width:100%;
  height:200px;
  padding:50px 20%;
}
header{
  background:#efefef;
}
content{
  background-color:#cccccc;
}
footer{
  background-color:#afafaf
}

.custom-menu {
  display: none;
  z-index: 1000;
  position: absolute;
  overflow: hidden;
  border: 1px solid #CCC;
  white-space: nowrap;
  background: #FFF;
  color: #333;
}
.custom-menu li {
  padding: 8px 12px;
  cursor: pointer;
  list-style-type: none;
  transition: all .3s ease;
  user-select: none;
}
.custom-menu li:hover {
  background-color: #DEF;
}
.colorpicker{
  position:fixed;
  z-index:20;
  display:flex;
  display:none;
  flex-wrap:wrap;
  top:10%;
  left:10%;
  height:80%;
  width:80%;
  background-color:white;
  -webkit-box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.5);
  -moz-box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.5);
  box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.5);
}
.color{
  display:block;
  flex-grow:1;
  transition:.5s ease-in-out;
  cursor:pointer;
}
.textChange{
  display:none;
  position:fixed;
  z-index:20;
  top:calc(50% - 25px);
  width:20%;
  height:50px;
  left:40%;
}
.textChange input{
  height:100%;
  width:100%;
  padding:10px;
  font-size:1.1em;
}
.overlay{
  display:none;
  position:fixed;
  z-index:10;
  width:100%;
  background-color:black;
  height:100%;
  opacity:.5;
  top:0;
}
.disabled{
  pointer-events:none;
  color:#a3a3a3;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="wrapper">
  <header><p>Hello</p></header>
  <content><p>Peter</p></content>
  <footer><p>Hallo</p></footer>
</div>


<div class="overlay"></div>
<div class="textChange">
  <input type="textarea" placeholder="Type new text in here">
</div>

<div class="colorpicker">
  <div class="color" style="background-color:#1abc9c"></div>
  <div class="color" style="background-color:#16a085"></div>
  <div class="color" style="background-color:#2ecc71"></div>
  <div class="color" style="background-color:#27ae60"></div>
  <div class="color" style="background-color:#3498db"></div>
  <div class="color" style="background-color:#2980b9"></div>
  <div class="color" style="background-color:#9b59b6"></div>
  <div class="color" style="background-color:#8e44ad"></div>
  <div class="color" style="background-color:#e74c3c"></div>
  <div class="color" style="background-color:#c0392b"></div>
  <div class="color" style="background-color:#e67e22"></div>
  <div class="color" style="background-color:#d35400"></div>
  <div class="color" style="background-color:#f1c40f"></div>
  <div class="color" style="background-color:#f39c12"></div>
  <div class="color" style="background-color:#ecf0f1"></div>
  <div class="color" style="background-color:#bdc3c7"></div>
  <div class="color" style="background-color:#95a5a6"></div>
  <div class="color" style="background-color:#7f8c8d"></div>
  <div class="color" style="background-color:#34495e"></div>
  <div class="color" style="background-color:#2c3e50"></div>
</div>

<ul class='custom-menu'>
  <li data-action="color">change color</li>
  <li data-action="bgcolor">change background-color</li>
  <li data-action="text">change text</li>
</ul>

＆＃13;

＆＃13;

＆＃13;

Answer 1

这是因为这一行：

$(".color").click( function(){

每次调用bgcolorPick()函数时，都会附加一个单击处理程序。因此，每次单击时，所有单击处理程序都会对先前单击的所有元素执行，从而更改其颜色。在将单击处理程序再次附加到最新单击的元素之前，将其分离：

$(".color").off("click").on("click", function(){

Updated codepen

Answer 2

您在click事件侦听器中的每次右键单击都创建了一个闭包并附加了一个新的on('contextmenu'侦听器，因此就是这种行为。只需将所有声明移出事件监听器，如下所示：

＆＃13;

＆＃13;

function ctxP() {
  $('.custom-menu li[data-action=bgcolor]').hide();
}

function ctxCon() {
  $('.custom-menu li[data-action=color]').hide();
  $('.custom-menu li[data-action=text]').hide();
}

function ctxHead() {
  $('.custom-menu li[data-action=color]').hide();
  $('.custom-menu li[data-action=text]').hide();
}

function ctxFoot() {
  $('.custom-menu li[data-action=color]').hide();
  $('.custom-menu li[data-action=text]').hide();
}

function colorPick() {
  $(".overlay").fadeIn();
  $(".colorpicker").fadeIn().css('display', 'flex');
  $(".color").click(function() {
    var color = $(this).css('background-color');
    $(efp).css('color', color);
    $(".colorpicker, .overlay").fadeOut();
  });
}

function bgcolorPick() {
  $(".overlay").fadeIn();
  $(".colorpicker").fadeIn().css('display', 'flex');
  $(".color").click(function() {
    var color = $(this).css('background-color');
    $(efp).css('background-color', color);
    $(".colorpicker, .overlay").fadeOut();
  });
}

function textChange() {
  $(".overlay, .textChange").fadeIn();
  $('.textChange input').keypress(function(e) {
    var text = $(this).val();
    if (e.keyCode == 13) {
      $(emo).text(text);
      $(".overlay, .textChange").fadeOut();
      $(this).val("");
    }
  });
}

$(".custom-menu li").on("click", function() {
  switch ($(this).attr("data-action")) {
    case "color":
      colorPick();
      break;
    case "bgcolor":
      bgcolorPick();
      break;
    case "text":
      textChange();
      break;
  }

  $(".custom-menu").fadeOut(100);
});

var efp;

$(document).on("contextmenu", function(e) {
  e.preventDefault();

  $('.custom-menu li').show(0);

  var el = e.target.nodeName,
    x = e.clientX,
    y = e.clientY;
  
  efp = document.elementFromPoint(x, y);

  $(".custom-menu").finish().fadeIn(100).css({
    top: e.pageY + "px",
    left: e.pageX + "px"
  });

  switch (el) {
    case "P":
      ctxP();
      break;
    case "CONTENT":
      ctxCon();
      break;
    case "HEADER":
      ctxHead();
      break;
    case "FOOTER":
      ctxFoot();
      break;
  }
});

$(document).click(function(e) {
  if (!$(e.target).parents(".custom-menu").length > 0) {
    $(".custom-menu").fadeOut(100);
  }
});

＆＃13;

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

header,
content,
footer {
  display: block;
  width: 100%;
  height: 200px;
  padding: 50px 20%;
}

header {
  background: #efefef;
}

content {
  background-color: #cccccc;
}

footer {
  background-color: #afafaf
}

.custom-menu {
  display: none;
  z-index: 1000;
  position: absolute;
  overflow: hidden;
  border: 1px solid #CCC;
  white-space: nowrap;
  background: #FFF;
  color: #333;
}

.custom-menu li {
  padding: 8px 12px;
  cursor: pointer;
  list-style-type: none;
  transition: all .3s ease;
  user-select: none;
}

.custom-menu li:hover {
  background-color: #DEF;
}

.colorpicker {
  position: fixed;
  z-index: 20;
  display: flex;
  display: none;
  flex-wrap: wrap;
  top: 10%;
  left: 10%;
  height: 80%;
  width: 80%;
  background-color: white;
  -webkit-box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.5);
  box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.5);
}

.color {
  display: block;
  flex-grow: 1;
  transition: .5s ease-in-out;
  cursor: pointer;
}

.textChange {
  display: none;
  position: fixed;
  z-index: 20;
  top: calc(50% - 25px);
  width: 20%;
  height: 50px;
  left: 40%;
}

.textChange input {
  height: 100%;
  width: 100%;
  padding: 10px;
  font-size: 1.1em;
}

.overlay {
  display: none;
  position: fixed;
  z-index: 10;
  width: 100%;
  background-color: black;
  height: 100%;
  opacity: .5;
  top: 0;
}

.disabled {
  pointer-events: none;
  color: #a3a3a3;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="wrapper">
  <header>
    <p>Hello</p>
  </header>
  <content>
    <p>Peter</p>
  </content>
  <footer>
    <p>Hallo</p>
  </footer>
</div>


<div class="overlay"></div>
<div class="textChange">
  <input type="textarea" placeholder="Type new text in here">
</div>

<div class="colorpicker">
  <div class="color" style="background-color:#1abc9c"></div>
  <div class="color" style="background-color:#16a085"></div>
  <div class="color" style="background-color:#2ecc71"></div>
  <div class="color" style="background-color:#27ae60"></div>
  <div class="color" style="background-color:#3498db"></div>
  <div class="color" style="background-color:#2980b9"></div>
  <div class="color" style="background-color:#9b59b6"></div>
  <div class="color" style="background-color:#8e44ad"></div>
  <div class="color" style="background-color:#e74c3c"></div>
  <div class="color" style="background-color:#c0392b"></div>
  <div class="color" style="background-color:#e67e22"></div>
  <div class="color" style="background-color:#d35400"></div>
  <div class="color" style="background-color:#f1c40f"></div>
  <div class="color" style="background-color:#f39c12"></div>
  <div class="color" style="background-color:#ecf0f1"></div>
  <div class="color" style="background-color:#bdc3c7"></div>
  <div class="color" style="background-color:#95a5a6"></div>
  <div class="color" style="background-color:#7f8c8d"></div>
  <div class="color" style="background-color:#34495e"></div>
  <div class="color" style="background-color:#2c3e50"></div>
</div>

<ul class='custom-menu'>
  <li data-action="color">change color</li>
  <li data-action="bgcolor">change background-color</li>
  <li data-action="text">change text</li>
</ul>

＆＃13;

＆＃13;

＆＃13;