Флажки Javascript Shift-Click, чтобы сделать приложение - PullRequest
Новая
       1

Флажки Javascript Shift-Click, чтобы сделать приложение

1 голос
/ 05 марта 2019

Сейчас я работаю над проектом Wes Bos Javascript 30.Превратил проект в приложение для дел.И я не могу понять, как использовать нажатие клавиши Shift для вновь созданных флажков, используя ванильный javascript.

Любое понимание того, как это сделать? 

const addBtn = document.querySelector('.addBtn');
const myInput = document.getElementById('myInput');
const toDo = document.querySelector('.toDo-container');
const checkbox = document.querySelectorAll('.toDo-container input[type=checkbox]');

addBtn.addEventListener('click', newElement);

myInput.addEventListener("keyup", function(e){ 
  if(e.keyCode === 13){
  e.preventDefault()
  newElement() }
});



// Create a new item when clicking on the "Add" button
function newElement(){
  let div = document.createElement('div');
  let input = document.createElement('input');
  let inputValue = document.getElementById('myInput').value;
  let textNode = document.createTextNode(inputValue);
  let p = document.createElement('p');

  div.className = "item";
  input.type = "checkbox";

  p.appendChild(textNode);

  div.appendChild(input);
  div.appendChild(p);

  toDo.appendChild(div); 

  if(inputValue !== ""){
     document.getElementById("myInput").value = "";
  }


}

// Shift Clicking Checkboxes.
let lastChecked;

function shiftClick(e){
    let inBetween = false;
    if(e.shiftKey && this.checked){
      checkbox.forEach(box => {
        if(box === this || box === lastChecked){
          inBetween = !inBetween
        }
        if(inBetween){
          box.checked = true;
        }
      });

    }
    lastChecked = this;
  }

checkbox.forEach(box => box.addEventListener('click', shiftClick));
https://codepen.io/iameddieyayaya/pen/XGWaQN?editors=1011

Спасибо за тонну!

Эдди Дж.

1 Ответ

1 голос
/ 05 марта 2019

Вы можете установить флаг при нажатии клавиши Shift и сбросить его при отпускании клавиши.Тогда ваш прослушиватель кликов может действовать только в зависимости от состояния флага.(Я не знаю, является ли фокусировка всего контейнера, как я сделал здесь, лучшим способом гарантировать, что вы не заметите нажатия клавиш, но это работает.) 

const container = document.getElementById("container");
const box = document.getElementById("box");
let shiftIsDown = false;

container.addEventListener("keydown", setShiftFlag);
container.addEventListener("keyup", setShiftFlag);
box.addEventListener("click", handleBoxClick);

container.focus();

function setShiftFlag(event){
  if(event.code == "ShiftLeft" || event.code == "ShiftRight"){
    if(event.type == "keydown"){
      shiftIsDown = true;
    }
    else if(event.type == "keyup"){
      shiftIsDown = false;
    }
  }
}

function handleBoxClick(){
  if(shiftIsDown){
    console.log("shift-click");
  }
  else{
    console.log("click");
  }
}
body{ height: 100px; }
#container{ width: 100%; height: 100%; }
<body>
  <div id="container" tabindex="0">
    <input type="checkbox" id="box" />
  </div>
</body>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...