Question

如何通过按住alt按钮来操作，将标签p的数据保存在可编辑的div中

这时我按下alt按钮，我得到了数据，但是mouseover事件继续得到数据，如果我按下了按钮，我只需要获取它。

start
fool
what a big fool
ok

我从p标记中获取信息，但是它会重复进行，并且我只需要按alt键就可以每次获取一次信息

Answer 1

我不是100％肯定您的要求，但这可能会为您提供使用代码。

我添加了第二个选项，它的代码要少一些。

$('#editor')
  .on('mousedown', function(edtEvent) {
    let et = $(edtEvent.delegateTarget);
    et.on('mouseenter', 'p', function(mevent) {
      let $p = $(this);
      et.on('keydown', function(e) {
        if (e.altKey && !$p.find('button').length) {
          $('<button />').text($p.text()).appendTo($p);
        }
      });
    }).on('mouseleave', 'p', function() {
      et.off('keydown');
    });
  }).on('click', 'button', function() {
    $(this).remove();
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div id='editor' contenteditable="true" class="editor">
  <!-- some text of contenteditable div -->
  <p>hi 1</p>
  <p>hi 2</p>
  <p>hi 3</p>
  <p>hi 4</p>
  <p>hi 5</p>
</div>

$('#editor')
  .on('click', 'button', function() {
    $(this).remove();
  }).on('mouseenter', 'p', function(e) {
    let $p = $(this);
    $(e.delegateTarget).on('keydown', function(e) {
      if (e.altKey && !$p.find('button').length) {
        $('<button />').text($p.text()).appendTo($p);
      }
    });
  }).on('mouseleave', 'p', function(e) {
    $(e.delegateTarget).off('keydown');
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div id='editor' contenteditable="true" class="editor">
  <!-- some text of contenteditable div -->
  <p>hi 1</p>
  <p>hi 2</p>
  <p>hi 3</p>
  <p>hi 4</p>
  <p>hi 5</p>
</div>

Answer 2

这是解决方案。

<script>
        //jquery code
        function pressAlt() {
            $('p').hover(function () {
                var $p = $(this);
                document.onkeydown = function (e) {
                    if (e.altKey) {
                        var texto = $p.text();
                        if ($($p).find('button').length === 0)
                            $($p).append('<button>'+ texto +'</button>');
                    }
                }
            });
        }
        $('#editor button').live('click', function(){
            $(this).remove();
        })
    </script>


    <div id='editor' contenteditable="true" class="editor" onmousedown='pressAlt()'>
        <!-- some text of contenteditable div -->
        <p>hi 1</p>
        <p>hi 2</p>
        <p> hi 3</p>
        <p> hi 4</p>
        <p> hi 5</p>
    </div>

如何在事件鼠标悬停一次，按下按钮alt事件时获取数据

2 个答案: