在设置超时运行时，如何不监听mouseenter和mouseleave事件？

I'm trying to create a simple "click to copy text onto clipboard" feature, and I'm having a hard time trying to write my javascript so that the different events don't intersect. Each time a user hovers on textarea I would like the textarea to change background color, and say "click to copy", and when you actually click, the text area changes color to something else and says "copied".

我正在尝试创建一个简单的“单击以将文本复制到剪贴板”功能,并且我很难尝试编写我的javascript,以便不同的事件不相交。每当用户在textarea上盘旋时,我希望textarea更改背景颜色,并说“点击复制”,当您实际点击时,文本区域会将颜色更改为其他内容并显示“已复制”。

Each time a user hovers on the textarea, it should ideally do the same thing. However, right now when I click copy, and then leave the textarea and come back the different text overlaps. How can I make sure the set timeout function runs fully, and only then again listens to the mouseenter and mouseleave events?

每次用户在textarea上盘旋时,理想情况下应该做同样的事情。但是,现在当我单击复制,然后离开textarea并返回时,不同的文本重叠。如何确保设置超时功能完全运行,然后再次监听mouseenter和mouseleave事件?

Additionally, here is the Code:

另外,这是代码:

var pixelCodeTextarea = $("#tracking_html"),
            textareaCopiedText = $('#pixel_textarea_copy'),
            textareaCopiedText2 = $('#pixel_textarea_copied'),
            textareaWrapper = $('#pixel_textarea_wrapper');
    
        textareaWrapper.mouseenter(function() {
          textareaCopiedText.removeClass('hidden');
          pixelCodeTextarea.css('background-color', '#f1f8fb');
        }).mouseleave(function() {
          textareaCopiedText.addClass('hidden');
          pixelCodeTextarea.css('background-color', 'transparent');
        });

        pixelCodeTextarea.on('click', function() {
          textareaCopiedText.addClass('hidden');
          pixelCodeTextarea.css('background-color', '#bbcadc');
          textareaCopiedText2.removeClass('hidden');

        window.setTimeout(function() { 
          pixelCodeTextarea.css('background-color', 'transparent'); 
          textareaCopiedText2.addClass('hidden');
         }, 1500);
        });

        .hidden {
          display: none;
        }

        .textarea_wrapper {
          position: relative;
          max-width: 500px;
        }

        .textarea_copy_code, 
        .textarea_copy_codied {
          position: absolute;
          top: 60px;
          left: 180px;
          font-weight: 600;
          text-transform: uppercase;
          font-size: 10px;
        }

        #tracking_html {
          max-width: 500px;
        }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="pixel_textarea_wrapper" class="textarea_wrapper">
        <div id="pixel_textarea_copy" class="textarea_copy_code hidden">Copy code to clipboard</div>
        <div id="pixel_textarea_copied" class="textarea_copy_codied hidden">Copied to clipboard</div>
        <textarea id="tracking_html">Hello this is code</textarea>
</div>

2 个解决方案

#1

You can do this:

你可以这样做:

var pixelCodeTextarea = $("#tracking_html"),
    textareaCopiedText = $('#pixel_textarea_copy'),
    textareaCopiedText2 = $('#pixel_textarea_copied'),
    textareaWrapper = $('#pixel_textarea_wrapper');
    
textareaWrapper.mouseenter(function() {
 if (textareaCopiedText2.hasClass('hidden')) {
  textareaCopiedText.removeClass('hidden');
  pixelCodeTextarea.css('background-color', '#f1f8fb');
  }
}).mouseleave(function() {
  textareaCopiedText.addClass('hidden');
  pixelCodeTextarea.css('background-color', 'transparent');
});

pixelCodeTextarea.on('click', function() {
  textareaCopiedText.addClass('hidden');
  pixelCodeTextarea.css('background-color', '#bbcadc');
  textareaCopiedText2.removeClass('hidden');

  window.setTimeout(function() { 
    pixelCodeTextarea.css('background-color', 'transparent'); 
    textareaCopiedText2.addClass('hidden');
  }, 1500);
}); 

.hidden {
  display: none;
}

.textarea_wrapper {
    position: relative;
    max-width: 500px;
}

.textarea_copy_code, 
.textarea_copy_codied {
    position: absolute;
    top: 60px;
    left: 180px;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 10px;
}

#tracking_html {
    max-width: 500px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="pixel_textarea_wrapper" class="textarea_wrapper">
  <div id="pixel_textarea_copy" class="textarea_copy_code hidden">Copy code to clipboard</div>
  <div id="pixel_textarea_copied" class="textarea_copy_codied hidden">Copied to clipboard</div>
    <textarea id="tracking_html">Hello this is code</textarea>
</div>

The code specifically:

代码具体为:

textareaWrapper.mouseenter(function() {
  if (textareaCopiedText2.hasClass('hidden')) {
    textareaCopiedText.removeClass('hidden');
    pixelCodeTextarea.css('background-color', '#f1f8fb');
  }
}).mouseleave(function() {
  textareaCopiedText.addClass('hidden');
  pixelCodeTextarea.css('background-color', 'transparent');
});

It checks if textareaCopiedText2 has the class hidden on it so it won't show when it does.

它检查textareaCopiedText2是否隐藏了类,因此它不会显示。

#2

The example of @Albzi works however perhaps you want the "copy text to clipboard" to reappear when the mouse never leaves the textarea after click?

@Albzi的例子也可以,但是当你点击鼠标后鼠标永远不会离开textarea时,你想要“复制文本到剪贴板”吗?

Like this:

var pixelCodeTextarea = $("#tracking_html"),
textareaCopiedText = $('#pixel_textarea_copy'),
textareaCopiedText2 = $('#pixel_textarea_copied'),
textareaWrapper = $('#pixel_textarea_wrapper'),
onTextarea = false;

textareaWrapper.mouseenter(function() {
        onTextarea = true;
        if(textareaCopiedText2.hasClass('hidden')) {
      textareaCopiedText.removeClass('hidden');
      pixelCodeTextarea.css('background-color', '#f1f8fb');
    }
}).mouseleave(function() {
    onTextarea = false;
    if(textareaCopiedText2.hasClass('hidden')) {
    textareaCopiedText.addClass('hidden');
    pixelCodeTextarea.css('background-color', 'transparent');
  }
});

pixelCodeTextarea.on('click', function() {
  textareaCopiedText.addClass('hidden');
  pixelCodeTextarea.css('background-color', '#bbcadc');
  textareaCopiedText2.removeClass('hidden');

  window.setTimeout(function() { 
    pixelCodeTextarea.css('background-color', 'transparent'); 
    textareaCopiedText2.addClass('hidden');
    if (onTextarea) {
        textareaCopiedText.removeClass('hidden');
      pixelCodeTextarea.css('background-color', '#f1f8fb');
    }
  }, 1500);
});

Here is the fiddle: https://jsfiddle.net/ttm8m8uu/

这是小提琴:https://jsfiddle.net/ttm8m8uu/