主页 / 问题 / 976419
Accepted
recile
Asked:2020-04-30 07:17:32 +0000 UTC2020-04-30 07:17:32 +0000 UTC

如何取消在js中单击时的函数传播？

  • 772

第一个按钮改变颜色，第二个按钮改变形状。如果你从一开始就按颜色然后改变，它仍然会继续改变颜色，反之亦然..

首先，按下按钮，然后是方块，
两个按钮应该只做他们的工作，
一个只改变第二个只油漆，现在，依次按下后，它们获得属性，新的和前一个开始改变和颜色颜色同时显示，正确的颜色分开

let btn_paint_bucket = document.querySelector('.btn-paint-bucket');
let btn_choose_color = document.querySelector('.btn-Choose-color');
let btn_move = document.querySelector('.btn-move');
let btn_transform = document.querySelector('.btn-transform');
let field = document.querySelector('.field');

let currentTool;

btn_paint_bucket.addEventListener('click', function (e) {
  field.addEventListener('click', function (e) {
      var selectedTd;
      let target =event.target;
      highlight(target); 
    
      function highlight(node) {
        node.classList.add('highlight');
      }
    })
})

btn_transform.addEventListener('click', function (e) {
  field.addEventListener('click', function (e) { 
      var selectedTd;
      let target =event.target;
      highlight(target);
      
      function highlight(node) {
        if(node.classList.contains('transform-cilcle')){
          node.classList.remove('transform-cilcle');
        } else {
          node.classList.add('transform-cilcle');
        }
      }
    })
})
.field {
  width: 600px;
  height: 600px;
  margin: auto;
  background: silver;
  overflow: hidden;
}

.inside{
  width: 190px;
  height: 190px;
  margin: 1px;
  border: solid;
  float: left;
  box-sizing: border-box;
  background-color: rgb(151, 150, 150);
}

.transform-cilcle{
  border-radius: 190px;
}

.highlight{
  background-color: red;
}
<span class="btn-paint-bucket" style="cursor: pointer;"> <img src="assets/icons/i1.png" alt=""> Paint </span>
<span class="btn-transform"style="cursor: pointer;" ><img src="assets/icons/i4.png" alt="">Transform</span>
<div class="field">
  <div class="inside"></div>
  <div class="inside"></div>
  <div class="inside"></div>
  <div class="inside"></div>
  <div class="inside"></div>
  <div class="inside"></div>
  <div class="inside transform-cilcle"></div>
  <div class="inside "></div>
  <div class="inside"></div>
</div>

javascript

1 个回答

  1. Best Answer

    我会这样做，通过单击按钮我们更改通过单击形状调用的函数：

    let btn_paint_bucket = document.querySelector('.btn-paint-bucket');
let btn_choose_color = document.querySelector('.btn-Choose-color');
let btn_move = document.querySelector('.btn-move');
let btn_transform = document.querySelector('.btn-transform');
let field = document.querySelector('.field');
let currentTool;

btn_paint_bucket.addEventListener('click', function (e) {
  currentTool = highlight;
});

btn_transform.addEventListener('click', function (e) {
  currentTool = transform;
});

field.addEventListener('click', function (e) {
  currentTool && currentTool(event.target); 
});

function highlight(node) {
  node.classList.toggle('highlight');
}

function transform(node) {
  node.classList.toggle('transform-cilcle')
}
    .field {
  width: 600px;
  height: 600px;
  margin: auto;
  background: silver;
  overflow: hidden;
}

.inside{
  width: 190px;
  height: 190px;
  margin: 1px;
  border: solid;
  float: left;
  box-sizing: border-box;
  background-color: rgb(151, 150, 150);
}

.transform-cilcle{
  border-radius: 190px;
}

.highlight{
  background-color: red;
}
    <span class="btn-paint-bucket" style="cursor: pointer;"> <img src="assets/icons/i1.png" alt="">Paint </span>
<span class="btn-transform"style="cursor: pointer;" ><img src="assets/icons/i4.png" alt="">Transform</span>
<div class="field">
  <div class="inside"></div>
  <div class="inside"></div>
  <div class="inside"></div>
  <div class="inside"></div>
  <div class="inside"></div>
  <div class="inside"></div>
  <div class="inside transform-cilcle"></div>
  <div class="inside "></div>
  <div class="inside"></div>
</div>

    • 1

相关问题