草庐IT

javascript - 检测父级为 contenteditable div 的 contenteditable child 的 keyup 事件

coder 2023-08-03 原文

目标:将 keydown 事件处理程序附加到作为 contenteditable div 子元素的 contenteditable span。

问题:如果您输入跨度，则会触发父事件而不是子事件。我想要的是 child 触发，这样我就可以捕获文本。我只想要那个令人满意的 child ，因为会有很多。

HTML/JS 在下面， fiddle 链接在这里:http://jsfiddle.net/aBYpt/4/

HTML

<div class="parent" contenteditable="true">
    Parent div text.

    <span class="child" contenteditable="true">First child span text.</span>
    <span class="child" contenteditable="true">Second child span text.</span>
    <span class="child" contenteditable="true">Third child span text.</span>
</div>

<div id="console"></div>

JavaScript/jQuery 
$(document).on( 'keyup', '.parent', function() {
    $('#console').html( 'Parent keyup event fired.' );
    //do stuff
});

$(document).on( 'keyup', '.child', function() {
    $('#console').html( 'Child keyup event fired.' );
    //do stuff
});

**注意:事件处理委托(delegate)给文档，因为元素是动态添加的。

最佳答案

所以这是一个错误。已确认 FF23 和 CHROME29 的解决方法(在没有虚拟机的 Linux 上，因此无法测试 IE)。您必须将包装跨度设置为 contenteditable false，您不能只是省略声明 contenteditable 属性，这是荒谬的。通过 Keypress event on nested content editable (jQuery) 解决

这是 fiddle :http://jsfiddle.net/aBYpt/14/

HTML

<div class="parent" contenteditable="true">
    Parent div text.

    <span contenteditable="false">
        <span class="child" contenteditable="true">First child span text.</span>
    <span contenteditable="false">
        <span class="child" contenteditable="true">Second child span text.</span>
    </span>
</div>

<div id="console"></div>

JavaScript/jQuery 
$(document).on( 'keyup', '.parent', function() {
    //do stuff
    $('#console').html( 'Parent keyup event fired.' );
});

$(document).on( 'keyup', '.child', function(e) {
    //do stuff
    $('#console').html( 'Child keyup event fired.' );
    e.stopPropagation();
});

关于javascript - 检测父级为 contenteditable div 的 contenteditable child 的 keyup 事件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18771651/

contenteditablejavascriptspan34jqueryhtml

有关javascript - 检测父级为 contenteditable div 的 contenteditable child 的 keyup 事件的更多相关文章

  1. ruby - RuntimeError(自动加载常量 Apps 多线程时检测到循环依赖 - 2

    我收到这个错误:RuntimeError(自动加载常量Apps时检测到循环依赖当我使用多线程时。下面是我的代码。为什么会这样？我尝试多线程的原因是因为我正在编写一个HTML抓取应用程序。对Nokogiri::HTML(open())的调用是一个同步阻塞调用，需要1秒才能返回，我有100,000多个页面要访问，所以我试图运行多个线程来解决这个问题。有更好的方法吗？classToolsController0)app.website=array.join(',')putsapp.websiteelseapp.website="NONE"endapp.saveapps=Apps.order("

  2. ruby-on-rails - 事件管理员日期过滤器日期格式自定义 - 2

    是否有简单的方法来更改默认ISO格式(yyyy-mm-dd)的ActiveAdmin日期过滤器显示格式？ 最佳答案 您可以像这样为日期选择器提供额外的选项，而不是覆盖js:=f.input:my_date,as::datepicker,datepicker_options:{dateFormat:"mm/dd/yy"} 关于ruby-on-rails-事件管理员日期过滤器日期格式自定义，我们在StackOverflow上找到一个类似的问题： https://s

  3. ruby-on-rails - 事件记录 : Select max of limit - 2

    我正在尝试将以下SQL查询转换为ActiveRecord，它正在融化我的大脑。deletefromtablewhereid有什么想法吗？我想做的是限制表中的行数。所以，我想删除少于最近10个条目的所有内容。编辑:通过结合以下几个答案找到了解决方案。Temperature.where('id这给我留下了最新的10个条目。 最佳答案 从您的SQL来看，您似乎想要从表中删除前10条记录。我相信到目前为止的大多数答案都会如此。这里有两个额外的选择:基于MurifoX的版本:Table.where(:id=>Table.order(:id).

  4. ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法？ - 2

    我遇到了一个非常奇怪的问题，我很难解决。在我看来，我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时，我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性，其中包括href和data-method。再次单击此链接后，我的服务器收到了对新href的请求，但使用的是旧的data-method，即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是，如果我刷新页面，HTML与"new"HTML相同(随返回的JS发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的

  5. ruby-on-rails - 事件管理员和自定义方法 - 2

    这是我在ActiveAdmin中的自定义页面ActiveAdmin.register_page"Settings"doaction_itemdolink_to('Importprojects','settings/importprojects')endcontentdopara"Text"endcontrollerdodefimportprojectssystem"rakedataspider:import_projects_ninja"para"OK"endendend我想做的是，当我单击“导入项目”按钮时，我想在Controller中执行rake任务。但是我无法访问该方法。可能是什

  6. ruby-on-rails - 在不重新查询数据库的情况下重新排序 Rails 中的事件记录？ - 2

    例如，假设我有一个名为Products的模型，并且在ProductsController中，我有以下代码用于product_listView以显示已排序的产品。@products=Product.order(params[:order_by])让我们想象一下，在product_listView中，用户可以使用下拉菜单按价格、评级、重量等进行排序。数据库中的产品不会经常更改。我很难理解的是，每次用户选择新的order_by过滤器时，rails是否必须查询，或者rails是否能够以某种方式缓存事件记录以在服务器端重新排序？有没有一种方法可以编写它，以便在用户排序时rails不会重新查询结果

  7. ruby - 检测由 RSpec、Ruby 运行的代码 - 2

    我想知道我的代码是否在rspec下运行。这可能吗？原因是我正在加载一些错误记录器，这些记录器在测试期间会被故意错误(expect{x}.toraise_error)弄得乱七八糟。我查看了我的ENV变量，没有(明显的)测试环境变量的迹象。 最佳答案 在spec_helper.rb的开头添加:ENV['RACK_ENV']='test'现在您可以在代码中检查RACK_ENV是否经过测试。 关于ruby-检测由RSpec、Ruby运行的代码，我们在StackOverflow上找到一个类似的问题

  8. ruby - 使用 Ruby Daemons gem 检测停止 - 2

    我正在使用rubydaemongem。想知道如何向停止操作添加一些额外的步骤？希望我能检测到停止被调用，并向其添加一些额外的代码。任何人都知道我如何才能做到这一点？ 最佳答案 查看守护程序gem代码，它似乎没有用于此目的的明显扩展点。但是，我想知道(在守护进程中)您是否可以捕获守护进程在发生“停止”时发送的KILL/TERM信号...？trap("TERM")do#executeyourextracodehereend或者你可以安装一个at_exit钩子(Hook):-at_exitdo#executeyourextracodehe

  9. ruby-on-rails - Ruby 长时间运行的进程对队列事件使用react - 2

    我有一个将某些事件写入队列的Rails3应用。现在我想在服务器上创建一个服务，每x秒轮询一次队列，并按计划执行其他任务。除了创建ruby​​脚本并通过cron作业运行它之外，还有其他稳定的替代方案吗？ 最佳答案 尽管启动基于Rails的持久任务是一种选择，但您可能希望查看更有序的系统，例如delayed_job或Starling管理您的工作量。我建议不要在cron中运行某些东西，因为启动整个Rails堆栈的开销可能很大。每隔几秒运行一次它是不切实际的，因为Rails上的启动时间通常为5-15秒，具体取决于您的硬件。不过，每天这样做几

  10. ruby-on-rails - 使用 Rails 事件记录获取二级模型 - 2

    我有一个帖子属于城市的关系，城市又属于一个州，例如:classPost现在我想找到所有帖子及其所属的城市和州。我编写了以下查询来获取带有城市的帖子，但不知道如何在同一查找器中获取带有城市的相应州:@post=Post.find:all,:include=>[:city]感谢任何帮助。谢谢。 最佳答案 Post.all(:include=>{:city=>:state}) 关于ruby-on-rails-使用Rails事件记录获取二级模型，我们在StackOverflow上找到一个类似的问

随机推荐