Question

我想在选择一系列单元格时阻止打开下拉菜单。我知道，我可以添加onmousedown个活动并致电event.preventDefault()

问题是，这也会禁用单击事件的下拉列表。有没有办法区分范围的选择（按下鼠标而不是立即释放）和点击单个细胞（按下并释放鼠标）？我也试过onselectstart，但在这种情况下它对我没有帮助。

这是一个小型演示： https://jsfiddle.net/vqsv99t4/2/

Answer 1

我已根据您的需要更新您的代码。

禁用文字选择：已从Javascript移至CSS

.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Chrome/Safari/Opera */
     -khtml-user-select: none; /* Konqueror */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  not supported by any browser */
}

来源：https://stackoverflow.com/a/4407335/1957036

阻止事件从<td>传播到document ：event.stopPropagation()将停止将事件冒泡到文档mousemove()和{{ 1}}听众
逻辑：存储选择已开始的第一个单元格（单元格为mouseup()个事件）。然后，检查选择停止的单元格（mousedown()事件）。
修改后的HTML以便更好地使用。
在用于存储行列信息的单元格上添加了mouseup()属性

更新后的2016-11-11

添加了jQuery-UI Selectmenu以替换data-。

原因：<select>下拉列表无法使用JavaScript / JQuery触发。

＆＃13;

<select>

＆＃13;

//console.clear();

var BUTTON_LEFT = 1,
  BUTTON_RIGHT = 2;

var startCell = null;


(function() {

  $("#select").selectmenu();

  $(".mouse-event-cell")
    .on('mousedown', onMouseDown)
    .on('mouseup', onMouseUp)
    .on('mousemove', onMouseOver);
  $(document)
    .on('mousemove', onDocMouseOver)
    .on('mouseup', onDocMouseUp);
})();

function onDocMouseOver(e) {
  if (e.buttons !== BUTTON_LEFT) {
    startCell = null;
    clearFill();
  }
}

function onDocMouseUp(e) {
  if (e.buttons !== BUTTON_LEFT) {
    startCell = null;
    clearFill();
  }
}

function onMouseDown(e) {
  isInsideCell = true;

  if (startCell === null)
    startCell = e.currentTarget;
};

function onMouseOver(e) {
  if (startCell !== null) {
    fill(startCell, e.currentTarget, 'region');
  }
  e.stopPropagation();
}

function onMouseUp(e) {
  var endCell = e.currentTarget;

  if (startCell !== null) {
    fill(startCell, endCell, 'selected');
  }

  startCell = null;
  e.stopPropagation()
}

function fill(startCell, endCell, classToAdd) {
  var col0 = startCell.dataset['column'],
    row0 = startCell.dataset['row'],
    col1 = endCell.dataset['column'],
    row1 = endCell.dataset['row'],
    colMin = Math.min(col0, col1),
    colMax = Math.max(col0, col1),
    rowMin = Math.min(row0, row1),
    rowMax = Math.max(row0, row1);

  clearFill();

  if (startCell === endCell) {
    console.log('same-cell');
  } else {
    console.log('range-of-cell');
  }

  //console.log(startCell, endCell);


  for (var itCol = colMin; itCol <= colMax; itCol++) {
    for (var itRow = rowMin; itRow <= rowMax; itRow++) {
      $('#codexpl .mouse-event-cell#cell_' + itRow + '_' + itCol).addClass(classToAdd);
    }
  }
}

function clearFill() {
  $('#codexpl .mouse-event-cell').removeClass('selected').removeClass('region');
}

＆＃13;

.ui-selectmenu-button.ui-button {
  width: 5em;
}
select {
  width: auto;
}
table {
  border-collapse: separate;
}
td.mouse-event-cell {
  border: 1px solid #ddd;
  padding: 2px 10px;
  height: 30px;
  /*To disable the text selection*/
  -webkit-touch-callout: none;
  /* iOS Safari */
  -webkit-user-select: none;
  /* Chrome/Safari/Opera */
  -khtml-user-select: none;
  /* Konqueror */
  -moz-user-select: none;
  /* Firefox */
  -ms-user-select: none;
  /* Internet Explorer/Edge */
  user-select: none;
  /* Non-prefixed version, currently
                                  not supported by any browser */
}
td.selected {
  background-color: goldenrod;
  color: white;
}
td.region {
  border-style: dashed;
  border-color: #BBB;
}

＆＃13;

Javascript：在选择时阻止下拉列表打开

1 个答案: