如何在点击提交按钮之前检测我被点击的位置答案

【问题标题】：How to detect where I was clicked before click on submit button如何在点击提交按钮之前检测我被点击的位置
【发布时间】：2018-09-01 05:00:57
【问题描述】：

我在项目中遇到了问题。在我的项目中，我想要点击 facebook 上传按钮后点击鼠标的位置。

例如

这里在图片中说我被点击了Hello 文本我想要Hello 文本的位置，然后我点击facebook 上传按钮并在文本之后添加图像。与Hello Test 的情况类似。这是我一直在尝试的地方

<!doctype html>
<html lang="{{ app()->getLocale() }}">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>Laravel</title>

        <!-- Fonts -->

    </head>
    <body>
        <div id="container">
            <h1>Medium Editor</h1>

            <form action="{{ route('editor') }}" method="post">
                {{ csrf_field() }}
                <div class="editable">
                    <textarea class="form-control textarea" name="description_en" id="description_en" ></textarea>
                </div>
                <input type="submit" value="submit">
            </form>
            <button id="facebookUpload">Facebook Upload</button>
        </div>

        <script type="text/javascript" src="{{ asset('js/jquery.js') }}"></script>
        <script>


            jQuery(document).ready(function(){
                jQuery("#facebookUpload").focusin(function(e){
                    var posX = jQuery(this).prev().focusout().position().left;
                    var posY = jQuery(this).prev().focusout().position().top;


                    jQuery('.medium-editor-element').append('<img id="theImg" src="https://cdn.filestackcontent.com/jHNwCAMlTzujKkeLIyrq" style="width:100px;height:100px;left:'+ (e.pageY - posY) + ';top:'+ (e.pageX - posX) +'" />')

                    console.log((e.pageX - posX) + ' , ' + (e.pageY - posY));
                });
            });
        </script>
    </body>
</html>

但这不起作用。在所有情况下，它都会在底部添加图像。

这是一个例子

我没有找到解决方案。请帮助我。谢谢。

【问题讨论】：

你可以使用 javascript sessionStorage 属性。并在您单击项目后设置唯一的会话存储，然后当您将鼠标悬停在 facebook 按钮上时获取会话存储的价值……这可能会对您有所帮助..
您的问题有两个问题：1) 您无法在<textarea> 中添加图片。但是在<div contentEditable> 中，是的。 2) 您将无法根据 x/y 点击坐标附加任何内容。您需要定位一个元素以在之前、之后或内部附加一些内容。
@LouysPatriceBessette 是的，我想定位
标签，在我点击 facebook 按钮并在其后添加图像之前选择该标签。这就是我需要的。但不知道怎么做。
好的...还有一件事，你在使用Medium Editor 插件吗？ （这可以解释文本区域的混乱）.
是的，我正在使用 Medium Editor 插件。但是对于图像我没有使用媒体编辑器。这是我的自定义函数。

标签： javascript jquery laravel editor

【解决方案1】：

下次，请提及您问题的所有相关细节。使用将<textarea> 替换为<div contentEditable> 的插件非常重要。

您的尝试存在 2 个问题：

您不能在<textarea> 中添加图像。但是在<div contentEditable> 中，是的。
您将无法根据 x/y 点击坐标附加任何内容。您需要定位一个元素以在之前、之后或内部附加一些内容。

所以这里有一个解决方案，使用event target，来存储点击的元素。

您必须检查该目标是否为<p>。因为如果是<div>，它可能是编辑器的 div ......而且在它后面附加一个图像会很烦人。

因此，如果不是这种情况，请使用变量将该元素保存在内存中。

然后点击FB按钮，即可追加图片。

var editor = new MediumEditor('.editable textarea');

var clickedElement;

$(".medium-editor-element").on("click",function(e){
  
  // Making sure the click did not occured on the editor itself.
  if(e.target.tagName == "DIV" && $(e.target).hasClass("medium-editor-element")){
    return;
  }
  
  // Keep that clicked element in memory...
  clickedElement = $(e.target);
  
});

$("#facebookUpload").on("click",function(){
  if(typeof(clickedElement) != "undefined"){
    // Append an image after the last clicked element, if any.
    clickedElement.after("<img src='https://via.placeholder.com/80x80?text=IMG'>");
  }
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/medium-editor/5.23.3/css/medium-editor.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/medium-editor/5.23.3/css/themes/beagle.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/medium-editor/5.23.3/js/medium-editor.min.js"></script>

<div id="container">
  <h1>Medium Editor</h1>

  <form action="" method="post">
    <div class="editable">
      <textarea class="form-control textarea" name="description_en" id="description_en" ></textarea>
    </div>
    <input type="submit" value="submit">
  </form>
  <button id="facebookUpload">Facebook Upload</button>
</div>

【讨论】：

我已经添加了你的代码。我还添加了<div class="editable" contenteditable="true">，但什么也没发生。图片未添加。
没有。继续在您的 HTML 标记中使用 <textarea>... 这是插件的工作，将其替换为 <div contentEditable>
尝试使用您的完整代码，并将图像源替换为我的。 clickedElement.after("<img src='https://cdn.filestackcontent.com/jHNwCAMlTzujKkeLIyrq'>"); 但什么也没发生。未添加图像。它没有显示任何错误但无法正常工作
那我不知道怎么了。查看console 是否有错误。
感谢您的帮助。你拯救了我的一天