javascript - style.pointerEvents 不起作用

Question

我正在尝试制作一个随着您越来越多地点击它而缩小的元素。一旦达到 1% 的阈值，它就会以完整长度重新出现并且不可点击。 style.pointerEvents 不起作用。 (这是为了解决问题而添加的代码。)这是全部代码，肯定有冲突的变量什么的。但主要前提是摇动元素并缩小，然后重新增长并禁用自身，并在等待一段时间后启用自身。

`var 旋转 = false;变量高度 = 24.6；变量宽度 = 15

function clickedhub() {
    clicked();
    timeout();
}

function clicked() {
    document.getElementById('box').onclick = function() {
    var div = document.getElementById('box'),
        deg = rotated ? 0 : 10;

    div.style.webkitTransform = 'rotate('+deg+'deg)'; 
    div.style.msTransform     = 'rotate('+deg+'deg)'; 
    div.style.oTransform      = 'rotate('+deg+'deg)'; 
    div.style.transform       = 'rotate('+deg+'deg)';
   }
   setInterval(res, 140);
   function res() {
    document.getElementById('box').style = function() {
    var div = document.getElementById('box'),
    deg = rotated ? 0 : 0;

div.style.webkitTransform = 'rotate('+deg+'deg)'; 
div.style.mozTransform    = 'rotate('+deg+'deg)'; 
div.style.msTransform     = 'rotate('+deg+'deg)'; 
div.style.oTransform      = 'rotate('+deg+'deg)'; 
div.style.transform       = 'rotate('+deg+'deg)';
 }  
}
}


function timeout() {
    document.getElementById('box').onclick = function() {
    var div = document.getElementById('box');
    width = width / 1.5;
    height = height / 1.5; 
     }
   }

setInterval(gamerule, 10);
   function gamerule() {
        var div = document.getElementById('box');
        if (width <= 1) {
            div.removeEventListener("click", gamerule);
            width = 100;
            height = 100;
    } else {
        width--;
        height--;
    }
    div.style.width = width + '%';
    div.style.height = height + '%';
    div.addEventListener("click", gamerule);
}

`

Answer 1

这应该适合你

//setInterval(gamerule, 10);
let width = 100;
let height = 100;



var div = document.getElementById('box');

function gamerule() {
    if (width <= 1) {
        div.removeEventListener("click", gamerule);
        width = 100;
        height = 100;
    } else {
        width--;
        height--;
    }
    div.style.width = width + '%';
    div.style.height = height + '%';

}
div.addEventListener("click", gamerule);

#box{
  background-color:red;
  width:100%;
  height:100%;
}
#container{
  width:500px;
  height:500px;
}

Click on the red box 
<div id="container" >
  <div id="box">
  </div>
</div>