草庐IT

javascript - 我可以阻止点击触发网站的常规操作吗？

coder 2025-01-17 原文

作为 React.js 的实验，我正在尝试构建一个 chrome 扩展，它使用内容脚本将输入字段(现在还有一个按钮)注入(inject)某些网站。在这种情况下，我试图将其注入(inject) Twitter。它看起来像这样: 请注意，代码将按钮和输入放在文本下方，但结果相同

注入(inject)有效，但我实际上无法使用输入。我将该元素注入(inject)到主页上的推文中，当我点击输入框输入内容时，它会触发推文并展开或收缩。这会从输入中移除焦点，使其变得无用。我试图回调焦点 onBlur 和 stopPropagation() onClick，但是 onClick 没有被触发并且我不确定如何使用 onBlur 恢复焦点。我怎样才能停止注意力不集中？

如果您想自己测试，react-with-addons.js 来自入门工具包 here

编辑: 我尝试将按钮添加到代码中以查看是否可以单击它，我可以。我可以点击它而不会触发推文本身。这意味着输入框的某些特定内容导致了问题，或者按钮中的某些内容阻止了点击的传播。 当您单击其他元素没有而推文可能有的输入字段时，是否会触发一些特殊的事情？

编辑 2: 我现在尝试将 stopPropagation 添加到包含的 div 并增加它的 z-index，它们都不会阻止它。

编辑 3: 我现在已经尝试使用 stopPropagation onMouseDown(以及 onMouseUp 和 onClick，同时进行)，但没有成功。奇怪的是我之后尝试了 isPropagationStopped()，它返回 true。如果是这样，那为什么 Twitter 仍然被触发？

test_input.js

/**
 * @jsx React.DOM
 */
var Test_Input = React.createClass({
    maintain_focus: function(){
        e.stopPropagation();
        console.log("=====");
    },
    refocus: function(e){
        e.stopPropagation();
    },
    handle_click: function{
        console.log("clicked");
    }
    render: function(){
        return (<div>
                       <button onclick={this.handle_click}>
                       <input className="new_note_input" placeholder="Note" onclick={this.maintain_focus} onBlur={this.refocus}></input>
                   </div>);
    }
});
var elements_to_append_to = document.getElementsByClassName('content');
[].forEach.call(elements_to_append_to, function(element){
    var container = $("<span />");
    $(element).after(container);
    React.renderComponent(<Test_Input />, container[0]);
});

list .json

{
  "name": "Test Input",
  "version": "0.1",
  "manifest_version": 2,
  "permissions": ["tabs", "bookmarks", "declarativeWebRequest", "*://*/*"],
  "content_scripts": [
        {
            "matches": [ "https://twitter.com/*"],
            "css":["src/social_notes.css"],
            "js":[ "build/jquery-2.1.0.min.js", "build/react-with-addons.js", "build/test_input.js"]
        }
    ]
}

最佳答案

e.stopPropagation()适用于事件处理程序。由于输入字段点击触发默认行为，而不是 e.stopPropagation()，e.preventDefault() 在输入中带有 return false;框点击处理程序应该可以解决问题。

在处理程序中，在返回 false 之前执行 $(this).focus();。这将使文本框保持焦点。

例如:

$(".inputField").on("click", function(e){
  e.preventDefault();
  $(this).focus();
  return false;
})

关于javascript - 我可以阻止点击触发网站的常规操作吗？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24153253/

javascript我可以34codestopPropagationtwittergoogle-chrome-extensionreactjscontent-script

有关javascript - 我可以阻止点击触发网站的常规操作吗？的更多相关文章

  1. ruby - 为什么我可以在 Ruby 中使用 Object#send 访问私有(private)/ protected 方法？ - 2

    类classAprivatedeffooputs:fooendpublicdefbarputs:barendprivatedefzimputs:zimendprotecteddefdibputs:dibendendA的实例a=A.new测试a.foorescueputs:faila.barrescueputs:faila.zimrescueputs:faila.dibrescueputs:faila.gazrescueputs:fail测试输出failbarfailfailfail.发送测试[:foo,:bar,:zim,:dib,:gaz].each{|m|a.send(m)resc

  2. ruby - 在 Ruby 程序执行时阻止 Windows 7 PC 进入休眠状态 - 2

    我需要在客户计算机上运行Ruby应用程序。通常需要几天才能完成(复制大备份文件)。问题是如果启用sleep，它会中断应用程序。否则，计算机将持续运行数周，直到我下次访问为止。有什么方法可以防止执行期间休眠并让Windows在执行后休眠吗？欢迎任何疯狂的想法;-) 最佳答案 Here建议使用SetThreadExecutionStateWinAPI函数，使应用程序能够通知系统它正在使用中，从而防止系统在应用程序运行时进入休眠状态或关闭显示。像这样的东西:require'Win32API'ES_AWAYMODE_REQUIRED=0x0

  3. ruby - 使用 Vim Rails，您可以创建一个新的迁移文件并一次性打开它吗？ - 2

    使用带有Rails插件的vim，您可以创建一个迁移文件，然后一次性打开该文件吗？textmate也可以这样吗？ 最佳答案 你可以使用rails.vim然后做类似的事情::Rgeneratemigratonadd_foo_to_bar插件将打开迁移生成的文件，这正是您想要的。我不能代表textmate。 关于ruby-使用VimRails，您可以创建一个新的迁移文件并一次性打开它吗？，我们在StackOverflow上找到一个类似的问题： https://sta

  4. ruby - 我可以使用 Ruby 从 CSV 中删除列吗？ - 2

    查看Ruby的CSV库的文档，我非常确定这是可能且简单的。我只需要使用Ruby删除CSV文件的前三列，但我没有成功运行它。 最佳答案 csv_table=CSV.read(file_path_in,:headers=>true)csv_table.delete("header_name")csv_table.to_csv#=>ThenewCSVinstringformat检查CSV::Table文档:http://ruby-doc.org/stdlib-1.9.2/libdoc/csv/rdoc/CSV/Table.html

  5. ruby - 我可以使用 aws-sdk-ruby 在 AWS S3 上使用事务性文件删除/上传吗？ - 2

    我发现ActiveRecord::Base.transaction在复杂方法中非常有效。我想知道是否可以在如下事务中从AWSS3上传/删除文件:S3Object.transactiondo#writeintofiles#raiseanexceptionend引发异常后，每个操作都应在S3上回滚。S3Object这可能吗？？ 最佳答案 虽然S3API具有批量删除功能，但它不支持事务，因为每个删除操作都可以独立于其他操作成功/失败。该API不提供任何批量上传功能(通过PUT或POST)，因此每个上传操作都是通过一个独立的API调用完成的

  6. ruby - 触发器 ruby​​ 中 3 点范围运算符和 2 点范围运算符的区别 - 2

    请帮助我理解范围运算符...和..之间的区别，作为Ruby中使用的“触发器”。这是PragmaticProgrammersguidetoRuby中的一个示例:a=(11..20).collect{|i|(i%4==0)..(i%3==0)?i:nil}返回:[nil,12,nil,nil,nil,16,17,18,nil,20]还有:a=(11..20).collect{|i|(i%4==0)...(i%3==0)?i:nil}返回:[nil,12,13,14,15,16,17,18,nil,20] 最佳答案 触发器(又名f/f)是

  7. ruby-on-rails - Rails - 乐观锁定总是触发 StaleObjectError 异常 - 2

    我正在学习Rails，并阅读了关于乐观锁的内容。我已将类型为integer的lock_version列添加到我的articles表中。但现在每当我第一次尝试更新记录时，我都会收到StaleObjectError异常。这是我的迁移:classAddLockVersionToArticle当我尝试通过Rails控制台更新文章时:article=Article.first=>#我这样做:article.title="newtitle"article.save我明白了:(0.3ms)begintransaction(0.3ms)UPDATE"articles"SET"title"='dwdwd

  8. ruby - 有人可以帮助解释类创建的 post_initialize 回调吗 (Sandi Metz) - 2

    我正在阅读SandiMetz的POODR，并且遇到了一个我不太了解的编码原则。这是代码:classBicycleattr_reader:size,:chain,:tire_sizedefinitialize(args={})@size=args[:size]||1@chain=args[:chain]||2@tire_size=args[:tire_size]||3post_initialize(args)endendclassMountainBike此代码将为其各自的属性输出1,2,3,4,5。我不明白的是查找方法。当一辆山地自行车被实例化时，因为它没有自己的initialize方法

  9. ruby-on-rails - 如何在 Rails Controller Action 上触发 Facebook 像素 - 2

    我有一个ruby​​onrails应用程序。我按照facebook的说明添加了一个像素。但是，要跟踪转化，Facebook要求您将页面置于达到预期结果时出现的转化中。即，如果我想显示客户已注册，我会将您注册后转到的页面作为成功对象进行跟踪。我的问题是，当客户注册时，在我的应用程序中没有登陆页面。该应用程序将用户带回主页。它在主页上显示了一条消息，所以我想看看是否有一种方法可以跟踪来自Controller操作而不是实际页面的转化。我需要计数的Action没有页面，它们是ControllerAction。是否有任何人都知道的关于如何执行此操作的gem、文档或最佳实践？这是进入布局文件的像素

  10. ruby - 是否可以覆盖 gemfile 进行本地开发？ - 2

    我们的git存储库中目前有一个Gemfile。但是，有一个gem我只在我的环境中本地使用(我的团队不使用它)。为了使用它，我必须将它添加到我们的Gemfile中，但每次我checkout到我们的master/dev主分支时，由于与跟踪的gemfile冲突，我必须删除它。我想要的是类似Gemfile.local的东西，它将继承从Gemfile导入的gems，但也允许在那里导入新的gems以供使用只有我的机器。此文件将在.gitignore中被忽略。这可能吗？ 最佳答案 设置BUNDLE_GEMFILE环境变量:BUNDLE_GEMFI

随机推荐